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内 容 简 介 
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Preface MME 





近 几 年 , 随 着 互联 网 的 迅速 发 展 . 各 大 公司 都 在 大 量 招聘 网 页 前 端 设计 人 
员 , 同 时 对 前 端 设计 师 的 技能 要 求 也 大 大 提高 。 如 今 的 网 页 设计 师 需 要 了 解 整 
个 Web 标准 体系 才能 制作 出 符合 规范 的 页 面 。 

HTML 5 Æ W3C 5 WHATWG 合作 的 结果 ,虽然 它 仍 处 于 完善 之 中 , 然 
而 ,目前 大 部 分 浏览 器 已 经 支持 HTML 5。HTML 5 是 Web 开发 的 一 次 重大 
改变 ,可 以 说 它 代 表 着 未 来 的 发 展 趋势 。 

本 书 主要 介绍 前 端 网 页 开发 的 必 备 技术 : HTML 5,CSS 3 及 JavaScript. 
还 包括 响应 式 布局 .字体 式 图 标 和 框架 等 网 页 设计 主流 技术 。 每 个 项 目 中 , 介 
绍 知识 点 后 会 随 之 实现 相关 任务 ,使 学 生 以 任务 驱动 的 方式 来 学 习 , 通 过 任务 
实施 的 过 程 来 巩固 和 吸收 所 学 知识 。 

本 书 适合 网 页 设计 的 初学 者 阅读 ,并 提供 图 片 、 代 码 等 相关 素材 。 建 议 在 
阅读 本 书 的 同时 ,使 用 网 页 制作 工具 及 浏览 器 同步 操作 ,在 完成 实例 后 及 时 查 
看 结果 ,这 样 学 习 效率 会 大 大 提高 。 


Iss 内 容 概述 


全 书 共 分 为 11 个 项 目 。 

项 目 1 网 页 设计 基础 知识 : 介绍 网 页 和 网 站 的 基本 概念 和 网 页 制作 的 
工具 。 

项 目 2 构建 HTML 5 网 页 : 介绍 HTML 5 的 基础 知识 ,使 读者 掌握 
HTML 5 置 标语 言 的 使 用 方法 。 

项 目 3 网 页 布局 : 介绍 实现 网 页 布局 的 多 种 方法 ,包括 固定 宽度 的 布局 、 
流 式 布局 和 弹性 布局 等 ,使 读者 在 掌握 CSS 基础 , 盒 模 型 .浮动 .框架 等 知识 的 
基础 上 ,学 会 设置 常见 布局 。 

项 目 4 对 链接 应 用 样式 : 介绍 修改 默认 样式 的 方法 ,使 读者 能 够 创建 按 
钮 式 链接 。 

项 目 5 设置 网 页 导航 条 和 列表 样式 : 介绍 列表 在 网 页 导航 条 、 图 片 列表 
和 新 闻 列 表 中 的 作用 ,以 及 利用 列表 和 样式 实现 它们 的 方法 。 

项 目 6 和 用 户 交互 一 一 表单 : 介绍 各 种 表单 的 类 型 和 用 法 ,使 读者 能 够 
为 页 面 添加 搜索 栏 .创建 用 户 登 录 界 面 和 制作 购物 车 等 。 

项 目 7 美化 页 面 : 介绍 美化 页 面 的 主要 方法 ,以 设置 文本 效果 、 创 建 圆 角 


大 mimus 





边框 


键 词 


重 构 


识 融 


和 字体 式 图 标 为 实例 ,讲解 美化 页 面 的 具体 思路 和 步 又。 

项 目 8 添加 动态 效果 : 主要 介绍 JavaScript 基础 知识 ,完成 显示 与 取消 搜索 框 默认 关 
` 图 片 轮 播 .图 片 放大 镜 、 提 示 窗 口 和 选项 卡 切换 的 动态 效果 。 

项 目 9 响应 式 布局 : 主要 讲解 响应 式 布局 的 概念 、 页 面 优化 的 方法 。 

项 目 10 用 Bootstrap 重 构 网 页 : 介绍 Bootstrap 的 概念 ,使 读者 掌握 利用 Bootstrap 
页 面 的 方法 。 

项 目 11 综合 练习 : 以 学 校 网 站 的 制作 及 学 校 手 机 网 页 的 制作 为 案例 ,将 整 本 书 的 知 
会 贯通 。 


4 本 书 特点 


CL) 案例 导入 任务 驱动 .项 目 导 向 ,每 一 个 项 目 完善 网 页 的 一 部 分 。 
(2) 每 个 任务 由 学 习 情境 、 任 务 描述 ,任务 知识 .任务 实施 等 模块 组 成 ,理论 和 实践 紧密 


结合 。 


G) 多 个 实例 环 环 相 扣 , 迭 代 递 增 。 
(4) 采用 当前 最 主流 的 HTML 5、CSS 3 ,涉及 响应 式 布 局 .字体 式 图 标 及 框架 技术 。 
(5) KBER Photoshop [E Fr AE H, Flash 动画 制作 的 内 容 , 从 纯 网 页 编辑 的 角度 进行 


编写 。 


jgxu 


(6) 教材 配套 相关 教学 资源 ,提供 图 片 ` 代 码 等 相关 素材 供 免费 使 用 。 


[sanz 


本 书 代码 以 灰色 为 背景 ,如 下 所 示 。 


<!doctype html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
<title> 文 档 标题 </title> 
</head> 
< body> 
<! -一 此 处 为 页 面 正文 部 分 一 > 
</body> 
</html> 


由 于 编者 水 平 有 限 , 书 中 难免 有 不 足 之 处 , 敬 请 广大 读者 批评 、 指 正 ! 编者 E-mail: 


qin@ sina. com, 


编 者 
2015 年 7 月 


AES 1 TGP DU AYR ee mmm mnm mne nennen 


任务 


任务 
实 训 


任务 
实 训 


任务 
实 训 


任务 
实 训 


项 目 1 网 页 设计 基础 知识 


项 目 2 构建 HTML 5 网 页 


项 目 3 网 页 布局 


项 目 4 ”对 链接 应 用 样式 


修改 链接 样式 MM 


项 目 5 设置 网 页 导航 条 和 列表 样式 


项 目 6 ”和 用 户 交 互 一 一 表单 


FUE EG PS eene tenente ener nnne 
创建 用 户 注册 界面 ee 





13 


41 
65 


87 


93 
115 


121 
143 


项 目 7 ”美化 页 面 


项 目 8 添加 动态 效果 





JE MEANA 


任务 ”对 页 面 添 加 响应 式 布局 …………………………… 


项 目 10 用 Bootstrap 重 构 网 页 


FES BAM e 


项 目 11 综合 练习 


任务 1 学 校 网 站 制作 e 


151 
172 


179 
198 


IPM D 233 
SCH “利用 Bootstrap 设置 标签 页 eem 


255 


2261 
任务 2 ”响应 式 布局 学 校 网 站 制作 eee eee cee cee eee eee eee cee eee eee eee tence a eee eee eee ee eee 


274 


288 








一 一 网 页 设计 基础 知识 











| 知识 目标 | 

”了 解 HTML、 网 页 和 网 站 的 基本 概念 。 
。， 了 解 网 页 制作 的 工具 。 

| 技能 目标 | 

。 能 够 选择 合适 的 软件 进行 网 页 制作 。 
| 素养 目标 | 

”掌握 网 页 制作 的 基本 思路 。 

。 培养 一 定 的 自学 能 力 。 


任务 1 认识 网 页 和 网 站 


b 学 习 情 境 


冰 天 美 帝 是 一 家 经 营 冰激凌 销售 的 公司 , 随 着 大 家 生活 水 平 的 提高 和 消费 意识 的 转变 ， 
该 公司 在 近 两 年 内 迅速 发 展 。 为 了 更 方便 地 为 客户 提供 最 新 信息 和 相关 服务 ,公司 决定 制 
作 一 个 网 站 。 

公司 的 员工 小 黄 一 直 对 网 页 设计 感 兴趣 , 借 此 机 会 ,他 决定 先 自己 制作 一 个 网 页 , 先 从 
网 页 设计 基础 知识 开始 学 习 , 再 层 层 深入 。 最 终 实 现 如 图 1-1 和 图 1-2 所 示 的 网 站 首页 。 
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图 1-1 冰 天 美 帝 网 站 首页 
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图 1-2 冰 天 美 帝 产 品 单 页 页 面 
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本 单元 主要 让 初学 者 掌握 HTML、 网 页 和 网 站 的 基本 概念 ,理解 它们 的 含义 和 区 别 。 
b 任务 描述 


冰 天 美 帝 公司 的 小 黄 是 一 位 网 页 设计 的 初学 者 ,首先 需要 学 习 以 下 知识 。 
(1) 什么 是 网 页 ? 

(2) 什么 是 网 站 ? 

(3) 网 页 和 网 站 有 何 关联 和 区 别 ? 


b 任务 知识 


网 页 设计 是 指使 用 置 标语 言 通过 一 系列 设计 、 建 模 和 执行 的 过 程 将 电子 格式 的 信息 通 
过 互联 网 传输 ,最 终 以 图 形 用 户 界面 的 形式 被 用 户 所 浏览 。 简 单 来 说 ,网 页 设计 的 目的 就 是 
产生 网 站 。 简 单 的 信息 如 文字 ,图 片 和 表格 ,都 可 以 通过 超 文本 置 标语 言 `. 可 扩展 超 文本 置 
标语 言 等 放置 到 网 站 页 面 上 。 而 更 复杂 的 信息 如 矢量 图 形 动画、 视频 , 声 频 等 多 媒体 文档 
则 需要 插件 程序 来 运行 ,同样 地 ,它们 也 需要 通过 置 标语 言 移植 在 网 站 内 。 目 前 , 超 文本 置 
标语 言 与 层 合 样式 表 共 同 用 于 网 页 内 容 的 设计 已 经 被 广泛 地 接受 和 使 用 。 


L. HTML 


超 文本 置 标语 言 (HyperText Markup Language, HTML) 中 的 “ 超 文 本 ”是 指 页 面 内 可 
以 包含 图 片 .链接 ,甚至 音乐 ,程序 等 非 文字 元 素 。HTML 被 用 来 结构 化 信息 一 一 例如 标 
题 . 段 落 和 列表 等 ,也 可 用 来 在 一 定 程 度 上 描述 文档 的 外 观 和 语义 。 

HTML 文档 最 常用 的 扩展 名 为 . html, 由 于 DOS 等 的 旧 操作 系统 限制 扩展 名 最 多 为 
3 个 英文 字符 ,所 以 . htm 扩展 名 也 允许 使 用 。 


12. 网 页 


HTML 文档 由 网 页 浏览 器 读 取 , 并 以 网 页 的 形式 显示 出 它们 。 
网 页 是 一 个 文件 ,这 个 文件 可 以 存放 在 世界 某 个 角落 的 某 一 台 计算 机 中 ,是 万 维 网 中 的 
一 “页 ”。 网 页 经 由 网 址 来 识别 与 访问 。 当 我 们 在 网 页 浏览 器 输入 网 址 后 ,经 过 一 系列 复杂 
而 又 快速 的 程序 ,网 页 文件 会 被 传送 到 客户 端 ,然后 通过 浏览 器 解释 网 页 的 内 容 , 再 展示 到 
用 户 眼 前 。 
网 页 分 为 静态 网 页 和 动态 网 页 。 静 态 网 页 中 , HTML 代码 生成 后 ,页 面 的 内 容 和 显示 
效果 基本 上 不 会 发 生变 化 了 。 静 态 网 页 的 网 址 形式 通常 以 . html 结尾 ,还 有 以 . htm, 
. shtml,. xml 等 为 结尾 的 。 在 静态 网 页 中 ,也 可 以 出 现 各 种 动态 的 效果 ,如 GIF 格式 的 动画 、 
Flash ,滚动 字幕 等 ,这 些 “ 动 态 效果 ”只 是 视觉 上 的 。 本 书 主要 介绍 静态 网 页 的 制作 方法 。 

动态 网 页 是 所 有 动态 生成 与 动态 更 新 的 网 页 的 统称 。 与 传统 的 静态 网 页 相反 , 它 会 因 
为 变量 的 改变 而 产生 不 同 的 网 页 。 这 既 可 能 是 服务 器 端 生 成 的 网 页 ,也 可 能 是 用 户 端 生成 
的 网 页 ,或 是 两 者 的 混合 。 动 态 网 页 是 基本 的 HTML 语法 规范 与 Java、VB、VC 等 高 级 程序 
设计 语言 ,数据库 编程 等 多 种 技术 的 融合 。 动 态 网 页 通常 以 . aspx、. asp». jsp、 php.. perl、. cgi 


Q 














等 为 扩展 名 。 


[5 网 站 


网 站 是 指 在 互联 网 上 ,根据 一 定 的 规则 使 用 HTML 等 工具 制作 的 用 于 展示 特定 内 容 的 
相关 网 页 的 集合 。 我 们 可 以 通过 网 页 浏览 器 来 访问 网 站 ,获取 自己 需要 的 信息 或 者 享受 网 
络 服务 。 

在 互联 网 的 早期 ,网 站 还 只 能 保存 单纯 的 文本 。 经 过 几 年 的 发 展 , 当 万 维 网 出 现 之 后 ， 
图 像 声音 动画、 视频 ,甚至 3D 技术 开始 在 互联 网 上 流行 起 来 ,网 站 也 慢 慢 地 发 展 成 我 们 现 
在 看 到 的 图 文 并 茂 的 样子 。 


任务 2 选择 网 页 制作 工具 


> 学习 情 境 
在 理解 网 页 和 网 站 的 概念 后 ,要 进行 网 页 制作 还 须要 选择 制作 工具 。 本 单元 介绍 网 页 
制作 的 主要 工具 及 特点 。 


任务 描述 


选择 网 页 制作 工具 需要 了 解 以 下 知识 。 
(1) 常用 的 网 页 设计 工具 有 哪些 ? 
(2) 这 些 工 具有 什么 特点 ? 


b 任务 知识 


好 的 软件 会 令 我 们 网 页 制作 的 效率 大 大 提高 ,对 于 初学 者 来 说 ,选择 一 款 合适 的 软件 是 
非常 重要 的 。 如 今 的 网 页 制作 软件 越 来 越 多 ,如 Dreamweaver, FrontPage, Sublime Text, 
Web Page Maker 等 ,在 这 里 我 们 介绍 几 款 常 用 的 软件 。 


l 1. Dreamweaver 


Dreamweaver 是 Adobe 公司 的 网 站 开发 软件 ,是 著名 的 网 站 开发 工具 。 

Adobe Dreamweaver 安装 完成 后 ,打开 该 软件 会 看 到 如 图 1-3 所 示 的 界面 。 

Adobe Dreamweaver 使 用 所 见 即 所 得 的 设计 界面 ,也 有 HTML 编辑 的 功能 ,如 图 1-4 
所 示 , 是 个 可 视 化 的 网 页 设计 和 网 站 管理 工具 。 它 支持 各 种 Web 技术 ,包含 HTML fr. 
HTML 格式 控制 .HTML 格式 化 选项 、 可 视 化 网 页 设计 .图像 编辑 处理 Flash 和 
Shockwave 等 富 媒体 格式 和 动态 HTML 、 基 于 团队 的 Web 创作 。 

在 图 1-4 中 可 以 看 到 “代码 ”“ 拆 分 ”和 “设计 ”三 个 选项 卡 ,用 户 可 以 选择 可 视 化 方式 或 
源码 编辑 方式 。 
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Æ 1-4 Adobe Dreamweaver 中 HTML 代码 编辑 界面 
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l2 Sublime Text 


Sublime Text 是 一 个 跨 平 台 的 文本 编辑 器 ,安装 完成 后 ,该 软件 的 初始 界面 如 图 1-5 
所 示 。 





图 1-5 Sublime Text 初始 界面 


Sublime Text 支持 C, C++, C £,CSS, D, Erlang, HTML, Groovy, Haskell, Java, 
JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, 
SQL,TCL,Textile fll XML 等 编程 语言 的 语法 ,并 且 拥 有 优秀 的 代码 自动 完成 功能 (自动 补 
齐 插 号 、 自 动 补 全 已 经 出 现 的 单词 .自动 补 全 函数 名 等 ) ,非常 智能 。 另 外 , 它 也 拥有 代码 片 
段 的 功能 ,可 以 将 常用 的 代码 片段 保存 起 来 ,在 需要 时 随时 调用 。 

Sublime Text 的 特色 是 支持 多 种 布局 和 代码 地 图 ,提供 了 F11 ERI Shift 十 F11 键 进入 
全 屏 免 打扰 模式 ,还 拥有 强大 的 多 行 选择 和 多 行 编辑 功能 ,可 以 快速 地 进行 文件 切换 ,也 可 
以 快速 罗列 与 定位 函数 或 跳 转 到 指定 行 等 。 它 具有 很 多 独特 的 强大 的 功能 ,使 得 现在 很 多 
Web 设计 者 青睐 于 此 软件 。 


| 3. Aptana 


Aptana 是 一 个 非常 强大 的 、 开 源 的 专注 于 JavaScript 的 Ajax 开发 的 开发 工具 ,安装 完 
成 后 ,初始 界面 如 图 1-6 所 示 。 

Aptana 软件 主要 具有 如 下 特点 。 

CD 提供 JavaScript JavaScript 函数 .HTML 和 CSS 语言 的 Code Assist 功能 。 

(2) 显示 JavaScript, HTML 和 CSS 的 代码 结构 。 

(3) 支持 JavaScript, HTML 和 CSS 的 代码 提示 ,包括 JavaScript 自 定 义 函 数 。 

(4) 代码 语法 错误 提示 。 

(5) 支持 Aptana UI 自 定义 和 扩展 。 


项 目 1 ”网 页 设计 基础 知识 




















图 1-6 Aptana 界面 


(6) 支持 跨 平台 。 

(7) 支持 FTP/SFTP。 

(8) 调试 JavaScript. 

(9) 支持 流行 Ajax 框架 的 Code Assist 功能 。 

(10) 通过 插件 扩展 后 可 以 作为 Adobe AIR iPhone 和 Nokia 等 的 开发 工具 。 

(11) 提供 了 Eclipse 插件 。 

学 习 网 页 设计 除了 需要 这 些 网 页 制作 工具 ,还 需要 使 用 浏览 器 来 查看 我 们 操作 的 结果 。 
常见 的 浏览 器 有 微软 的 IE 浏览 器 Google 的 Chrome 浏览 器 ERAY Safari 浏览 器 、 Mozilla 
的 Firefox 浏览 器 等 。 

本 书 案例 中 采用 的 浏览 器 是 Firefox 36.0. 1。 


项 目 总 结 


在 理解 网 页 和 网 站 的 基本 概念 后 ,就 需要 选择 网 页 制作 工具 ,在 本 项 目 中 ,我 们 介绍 了 
几 款 主流 的 制作 工具 : Dreamweaver、Sublime Text 和 Aptana。 
最 后 对 本 书 案例 中 要 完成 的 任务 进行 介绍 ,让 读者 了 解 学 习 方 式 和 将 要 学 习 的 内 容 。 


课 后 练习 


1. 网 页 和 网 站 有 何 联系 与 区 别 ? 
2. 目前 主流 网 页 制作 工具 主要 有 哪些 ? 作为 初学 者 ,你 将 会 选择 哪 一 种 工具 ? 














构建 HTML 5 网 页 








| 知识 目标 | 

* 了解 HTML 的 发 展 历史 。 

* 了解 HTML 5 的 优势 。 

* 理解 HTML 5 的 常用 元 素 和 属性 。 
。 理解 HTML 5 新 增 元 素 的 功能 。 
| 技能 目标 | 

。 掌握 HTML 5 文档 创建 的 方法 。 
* 掌握 HTML 5 元 素 的 使 用 技巧 。 
| 素养 目标 | 

。 掌握 HTML 5 网 页 制作 的 思路 。 
。 探索 实现 一 种 效果 的 多 种 方法 。 
。 培养 团结 协作 的 精神 。 

。 探索 HTML 5 的 新 功能 。 


任务 ”创建 HTML 5 网 页 


b 学 习 情 境 





冰 天 美 帝 公司 员工 小 黄 通 过 学 习 得 知 ,一 般 在 浏览 器 上 所 看 到 的 网 页 都 是 由 一 种 称 为 


HTML 的 置 标语 言 所 描述 的 。 目 前 , HTML 语言 已 经 发 展 到 了 第 5 版 , 即 我 们 所 说 的 
HTML 5。 小 黄 决 定 从 HTML 5 入 手 . 了 解 并 学 习 HTML 技术 。 


本 任务 首先 介绍 网 页 制作 的 HTML 语言 ,从 结构 标签 到 内 容 标签 ,再 到 新 增 的 多 媒体 


支持 标签 。 通 过 这 个 项 目的 学 习 , 读 者 能 够 了 解 并 掌握 HTML 5 置 标语 言 的 使 用 方法 。 


任务 描述 


本 任务 的 目标 是 创建 一 个 HTML 5 网 页 。 首 先 需 要 为 网 站 首页 确定 基本 的 网 页 结构 ， 


并 且 在 页 面 中 添加 相应 的 内 容 , 如 导航 菜单 .图 片 等 。 最 后 为 了 实现 一 定 的 视觉 和 听觉 效 


果 , 在 页 面 中 插入 相关 的 音频 、 视 频 文 件 。 


本 任务 主要 内 容 如 下 。 

CO 构建 网 页 结构 。 

(2) 添加 网 页 内 容 。 

(3) 在 网 页 中 添加 多 媒体 内 容 。 
问题 引导 : 


(D 与 XHTML 相 比 .HTML 5 有 何 优势 ? 增加 了 什么 功能 ? 


(2) 如 何 编写 一 个 HTML 5 文档 ? 
(3) HTML 5 有 哪些 常用 标签 ? 


stssm 





(4) 如 何在 网 页 中 播放 音频 、 视 频 等 文件 ? 
b 任务 知识 


HTML 是 互联 网 上 应 用 最 为 广泛 的 置 标语 言 ,是 标准 通用 置 标语 言 SGML 下 的 一 个 应 
用 , 它 通 过 标签 符号 来 标记 网 页 中 各 部 分 的 内 容 , 比 如 用 来 标记 段落 的 一 p 之 标签 ,用 来 标记 
超 链接 的 二 a 二 标签 等 。 网 页 文件 本 身 就 是 一 种 文本 文件 ,通过 在 文本 文件 中 添加 标签 ,可 
以 告诉 浏览 器 如 何 显示 其 中 的 内 容 ( 如 文字 如 何 处 理 画面 如 何 安排 ` 图 片 如 何 显 示 等 )。 浏 
览 器 按 顺 序 读 取 网 页 文件 内 容 , 然 后 根据 标签 解释 和 显示 其 标记 的 内 容 。 

HTML 语言 于 20 世纪 90 年 代 初 面世 ,目前 的 版 本 及 HTML 5。 最 初 的 HTML 语法 要 
求 比较 松散 ,虽然 编写 方便 ,但 处 理 起 来 很 困难 ,而 且 不 易 兼 容 除 传统 计算 机 之 外 的 其 他 设 
备 , 比 如 手机 、 平 板 电脑 等 。 因 此 在 HTML 发 展 到 4. 01 版 本 之 后 , W3C( 万 维 网 联盟 ) 发 布 
了 使 用 DTD 进行 文档 类 型 声明 的 XHTML, XHTML 使 用 XML 的 规范 来 约束 HTML X 
档 , 语 法 严格 .格式 规范 ,是 将 HTML 和 XML 的 长 处 结合 的 产物 , 它 的 目标 是 逐步 取代 原 
有 的 HTML。 但 是 互联 网 上 还 有 很 多 的 HTML 页 面 是 不 符合 语法 规范 的 ,比如 标签 名 称 
大 小 写 混杂 元素 没有 结束 标签 .元 素 属性 没有 使 用 引号 等 。 基 于 此 ,W3C 在 2008 年 1 月 
制订 了 HTML 5 草案 。2014 年 10 月 29 日 ,W3C 宣布 .HTML 5 标准 规范 制定 完成 。 


L. HTML 5 的 优势 


CD 解决 了 跨 浏览 器 问题 

在 HTML 5 以 前 ,各 种 浏览 器 对 HTML JavaScript 的 支持 都 不 统一 ,这 样 就 造成 了 同 
一 个 网 页 在 不 同 浏览 器 中 的 显示 效果 不 一 样 。HTML 5 的 目标 是 分 析 各 浏览 器 所 具有 的 功 
能 ,并 以 此 制定 一 个 通用 规范 ,要 求 各 个 浏览 器 都 能 支持 这 个 通用 标准 。 支 持 HTML 5 的 
浏览 器 包括 Firefox( 火 狐 浏览 器 ) IE 9 及 其 更 高 版 本 、Chrome( 谷 歌 浏览 器 )、Safari、Opera 
等 ; 国内 的 邀 游 浏览 器 (Maxthon) ,以 及 基于 IE 或 Chromium 所 推出 的 360 浏览 器 .搜狗 浏 
览 器 ,QQ 浏览 器 .猎豹 浏览 器 等 同样 支持 HTML 5。 

(2) 有 更 明确 的 语义 支持 

在 HTML 5 之 前 ,要 表达 一 个 网 页 正文 文档 结构 ,一般 只 能 通过 二 div 之 标签 来 实现 ,如 
下 所 示 。 


<div id="header">...</div> 
<div id="nav">...</div> 
<div id= "article"> 

<div id= "section"> 


</div> 
</div> 
<div id= "aside">...</div> 
<div id= "footer">...</div> 


me2 em sm [OU 





在 上 面 的 页 面 结构 文档 中 ,所 有 的 页 面 元 素 都 是 采用 二 div 二 标签 来 实现 ,通过 id 值 表 
示 不 同 的 含义 。 这 种 采用 二 div 二 标签 进行 布局 的 方式 将 导致 语义 的 缺乏 。 
HTML 5 则 为 页 面 布局 提供 了 更 加 明确 的 语义 元 素 , 可 将 上 述 页 面 文档 改 为 如 下 形式 。 


< header >...</header > 
«nav »...«/nav > 
«article» 
< section»...«/section» 
</article> 
« aside >...</aside> 
< footer >...</footer > 


(3) 增强 了 Web 应 用 程序 的 功能 

HTML 5 提供 API 实现 浏览 器 内 的 编辑 . 拖 放 ,以 及 各 种 图 形 用 户 界面 的 功能 。 
HTML 5 提供 了 前 所 未 有 的 数据 与 应 用 接 人 开放 接口 ,使 外 部 应 用 可 以 直接 与 浏览 器 内 部 
的 数据 直接 相连 ,如 视频 影音 可 直接 与 话 简 及 摄像 头 相连 。 


12. HTML 5 文档 的 基本 结构 


HTML 5 文档 的 基本 结构 如 下 。 


<!doctype html > 
<html> 
< head> 
< meta charset = "utf - 8"> 
<title> 文 档 标题 </title> 
</head> 
<body> 
<! -一 此 处 为 页 面 正文 部 分 --> 
</body> 
</html> 


其 中 ,一 !doctype html 放 是 文档 类 型 声明 DTD, 但 是 这 个 DTD 并 不 符合 XML 文档 的 
语法 ,因为 HTML 5 并 不 是 “规范 优先 ”的 设计 。 

过 html 之 和 所 /html> 分 别 表示 一 个 文档 的 开始 和 结束 。 其 中 包含 了 两 对 很 重要 的 标 
签 : <head>...</head>k Ws EHK body>...</body> XE thin ¥ 。 

<head> ki a 2 3: 3€ JH oe di v SC PLI 90 fri B. AEH < title >... </title> tr 
描述 文档 标题 fi] — meta bi ERK ve CBS (5) EEE ES GRE AT fL 


[5 HTML 5 的 语法 变化 


HTML 5 较 之 前 的 XHTML 在 语法 上 发 生 了 一 些 变化 ,最 大 的 特点 就 是 HTML 5 可 
以 最 大 限度 地 兼容 互联 网 上 随处 可 见 的 不 规范 网 页 ,语法 变化 的 主要 内 容 如 下 。 
(1) 标签 不 再 区 分 大 小 写 。 





Q—— 
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(2) 元 素 可 以 省 略 结束 标签 。 
(3) 允许 省 略 属性 的 属性 值 。 
(4) 允许 属性 值 不 使 用 引号 。 


[^ HTML 5 的 常用 标签 


在 正式 学 习 HTML 5 标签 之 前 ,我 们 要 先 了 解 几 个 基本 概念 。 

元 素 : 元 素 是 HTML 5 文档 最 基本 的 构成 单元 , 它 用 于 表示 HTML 文档 的 结构 和 
HTML 文档 中 包含 的 数据 内 容 。 元 素 包 括 开始 标签 .属性 属性 值 `. 内 容 和 结束 标签 ,如 
图 2-1 所 示 。 





元 素 


<a href="index .html"> 首 页 </a> 


Kx * 
开始 标签 属性 属性 值 内 容 结束 标签 
图 2-1 元 素 的 结构 


标签 : 标签 使 用 一 对 尖 括 号 作为 限定 符 ,通常 成 对 出 现 ,用 来 描述 不 同 的 网 页 对 象 。 如 
二 a 记 .三 /a 是 用 来 表示 超 链接 对 象 的 标签 。 结 束 标签 在 标记 符号 前 有 一 个 斜 杠 “/”。 

属性 : 属性 用 来 为 元 素 附加 一 些 额 外 信息 ,比如 href 属性 用 于 设置 超 链接 元 素 的 链接 
地 址 信息 。 属 性 只 能 包含 在 开始 标签 中 ,一 个 标签 可 以 包含 多 个 属性 ,它们 之 间 用 空格 
分 隔 。 

(1) 结构 标签 

<html>; 它 是 HTML 5 文档 的 根 元 素 , 用 来 确定 文档 的 开始 和 结束 。 编 写 网 页 时 ,这 
个 页 面 都 包含 在 二 html 二 ... 达 /html 二 标签 中 。 在 HTML 5 规范 里 面 ,允许 完全 省 略 这 个 
元 素 。 

<head>; 它 用 于 定义 HTML 5 文档 的 页 面 头 部 信息 ,用 来 描述 有 关 文 档 的 元 信息 ,存放 内 
赃 式 样式 表 以 及 JavaScript HARY., <head>... </head> iE PENEDA <title>... 
二 /title 二 标签 用 来 描述 文档 的 标题 。 二 meta 志 标签 是 位 于 二 head 二 标签 和 二 title 志 标签 之 
间 的 一 个 辅助 性 标签 , 它 提供 网 页 元 信息 ,比如 针对 搜索 引擎 和 更 新 频 度 的 描述 和 关键 词 。 
<head> tr rP HARER F 


<head> 
<! -一 定义 HTML 页 面 所 使 用 的 字符 集 为 utf - 8 -— > 
<meta charset = "utf - 8"> 
«t —— 网 页 宽度 默认 等 于 屏幕 宽度 ,原始 缩放 比例 为 1, 即 网 页 初始 大 小 占 屏 幕 面积 的 100% --> 
<meta name = "viewport" content = "width = device - width, initial- scale= 1"> 
<!-- 设 置 还 浏览 器 兼容 模式 -一 > 
<meta http- equiv = "X— UA — Compatible" content = "IE = edge" 
<! -- 设 置 网 页 关键 字 一 -> 
<meta nane = "keywords" content = "冰激凌 , 冰激凌, 冰 天 美 帝 冰 激 凌 , 冰 天 美 帝 门 店 "> 
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<! 一 定义 网 页 文档 标题 -一 > 

<title > 欢迎 来 到 冰 天 美 帝 </title> 

<! -- 导 人 链接 式 CSS 文件 --> 

< link rel = "stylesheet" type = "text/css" href = "css/ickbuy.css"> 

<! -- ERR PRA—F IS MH --> 

<script type = "text/javascript" src "js/jquery- 1.11.2. js"></script > 
</head> 


<body>: 它 用 于 定义 HTML 5 文档 的 页 面 主体 部 分 ,网 页 中 所 有 可 见 部 分 都 包含 在 
<body>...</body> th F. 

<div>: 区 块 容器 标签 , 即 一 div 之 .一 /div 之 相当 于 一 个 容器 ,可 以 容纳 段落 .标题 、. 表 
格 、 图 片 等 各 种 HTML 元 素 。 一 般 把 一 div 二 .一 /div 之 中 的 内 容 视 为 一 个 独立 的 对 象 ,用 
于 CSS 的 控制 。 

<span>; 与 一 div 之 标签 一 样 ,作为 容器 标签 被 广泛 应 用 在 网 页 设计 中 。 在 二 span 二 …. 
二 /span 二 中 同样 可 以 容纳 各 种 HTML 元 素 , 从 而 形成 独立 的 对 象 。 

所 div 字 与 二 span 二 的 区 别 在 于 ,二 div 之 是 一 个 块 级 标签 , 它 包 围 的 元 素 会 自动 换行 ; 
而 过 span 之 是 一 个 行内 标签 ,在 它 的 前 后 不 会 换行 。 例 如 ,有 如 下 一 段 代 码 : 


<!doctype html > 

<html > 

<head> 

<meta charset = "utf - 8"> 
<title>div 与 span 的 区 别 </title> 
</head> 


<body> 
<p> div 标签 不 同行 </p> 
<div>< img src = "images/logo. png" width= "150" height = "40"></div> 
<div >< img src = "images/logo. png" width= "150" height = "40"></div> 
<div >< img src = "images/logo. png" width= "150" height = "40"></div> 
<p> span 标签 同一 行 </p> 
< span>< ing src = "images/logo. png" width= "150" height = "40"></span> 
< span »« img src = "images/logo. png" width= "150" height = "40"></span> 
<span >< img src = " images/logo. png" width= "150" height = "40"></span> 
</body > 
</html> 


其 在 浏览 器 中 的 显示 结果 如 图 2-2 has. <div> te PAY 3 幅 图 片 分 别 在 3 行 显示 ,而 
<span> fi 4& rp ff Ae ART. 

(2) 文本 控制 标签 

<hl>~<h6>; 用 来 定义 文档 标题 ,一 共有 六 级 。 近 hl 之 是 一 级 标题 ,字体 最 大 ; 
< 一 h6 二 是 六 级 标题 ,字体 最 小 ,如 图 2-3 所 示 。 

<p>: 用 来 定义 一 个 段落 ,在 浏览 器 中 显示 时 ,段落 通常 在 下 一 个 段落 之 前 插入 一 个 
新 行 , 并 与 下 一 段 有 默认 段 间 距 , 代 码 如 下 。 


(p 








(©, 图 fleW/Dymywebydivhtml ve|[a az-a | Ale »| = [|€ @ fle///D/myeeb/hh Y C| » | 三 
B 访问 最 多 |) 火 用 官方 站 点 C 新 手 上 路 D RARE COSE 门 网 址 大 全 O 好 六 B sass DXNESXSIINEHS > 
div 标 签 不 同行 








一 级 标题 


二 级 标题 
三 级 标题 
四 级 标题 


五 级 标题 
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图 2-2 <div>5<span># fl THRBR 图 2-3 各 级 标题 效果 
< body> 
<p>M&amp) 豆 豆 在 中 国 的 经 典 广 告 词 是 “ 快 到 碗 里 来 "如今 五 彩 缤 纷 的 Msamp;M 豆 豆 已 到 冰激凌 中 
来 。</p> 


<P> 爱 姆 氏 冰 激 凌 无 论 是 经 典 大 杯 装 , 还 是 如 花 采 般 甜 简装 ,缤纷 曲 奇 装 , 都 让 您 在 品尝 每 一 口 滑润 
冰激凌 时 体验 到 口 口 吃 到 豆 的 惊喜 ,让 您 得 到 美味 与 视觉 的 双重 享受 。</p> 
</body> 


浏览 器 显示 效果 如 图 2-4 所 示 。 





|[ e. @ fley/pymyweb/3-4html vel[azmr-cx |» | 三 
B 访问 最 多 |) cuties CI 新 手 上 路 LO 第 用 网 址 CO 谷歌 CL 网 址 大 全 Ce» 


MM 豆 豆 在 中 国 的 经 典 广告 词 是 “ 快 到 碗 里 来 ”， 如 今 五 彩 缤纷 的 M&M 吾 豆 已 
Shop ok. 
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与 视觉 的 双重 享受 。 





图 2-4 <P REAR 


<br>: 换行 标签 。 通 常 浏览 器 会 将 文本 之 间 的 空白 字符 都 转换 成 一 个 空格 ,并 将 多 余 
空白 字符 过 滤 掉 。 如 果 想 要 显示 多 个 空格 ,需要 通过 转 义 字符 “ &nbsp;” 表 示 一 个 空格 。 如 
果 需 要 在 文字 某 处 换行 显示 ,可 以 使 用 换行 标签 二 br 二 ,而 且 可 以 用 多 个 二 br 二 标签 产生 多 


——@ 








个 空 行 ,如 图 2-5 所 示 。 


<body> 
< p> &nbsp; &nbsp; &nbsp; &nbsp; Yk X € sii Mt M< br >< br > 
gnbsp; &nbsp; 吃 冰激凌 刺激 大 脑 快乐 区 < br >< br > 
&nbsp;&nbsp; 英 国 鼓励 市 民 吃 冰激凌 </p> 

</body> 


<hr>: 定义 水 平分 割 线 。 


r vfs 
<b>; 定义 粗 体 文本 。 Pm x 





<i>: 定义 斜体 文本 。 4 @ fle///D/myweb3-5. 7 C| » | 三 
<em>: 定义 强调 文本 ,实际 效果 和 和 斜体 文本 |B unie o vamos C 新 手 上 路 » 
差不多 。 WAREN 


<strong>; 4E X EL Pk CA, <b> ENTE 
用 基本 相同 。HTML 为 二 strong 二 标签 增加 了 语 
义 , 使 用 二 strong 二 描述 的 文本 代表 重要 的 文本 。 EXCEL rid 
<big>: 定义 大 号 字体 文本 。 
<small>: 定义 小 号 字体 文本 。 
<sup>: 定义 上 标 文 本 。 
<sub>: 定义 下 标 文本 。 
<bdo>: 定义 文本 显示 的 方向 ,属性 dir= "Itr" RIR XEM A E A HEJ JA E dir 一 "rtl" 
表示 文本 从 右 向 左 排列 。 
如 下 HTML 代码 示范 了 这 些 文本 控制 标签 的 用 法 ,显示 效果 如 图 2-6 所 示 。 
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图 2-5 <br>mRERR 


< body> 

<b> 加 粗 文本 : 欢迎 来 到 冰 天 美 帝 </b><br><br> 

ci > 斜体 文本 : 欢迎 来 到 冰 天 美 帝 </i><br><br> 
<em> 强 调 文本 : 欢迎 来 到 冰 天 美 帝 </em><br><br> 

< strong> 加 粗 文本 : 欢迎 来 到 冰 天 美 帝 </strong><br><br> 
<big> 大 号 字体 文本 : 欢迎 来 到 冰 天 美 帝 </big><br><br> 

< small > 小 号 字体 文本 : 欢迎 来 到 冰 天 美 帝 </small><br><br> 
上 标 文 本 : < sup > 欢迎 来 到 冰 天 美 帝 </sup><br><br> 

下 标 文本 : < sub> 欢 迎 来 到 冰 天 美 帝 </sub><br><br> 

从 左 向 右 排列 文本 : < bdo dir = "ltr"> 欢 迎 来 到 冰 天 美 帝 </bdo><br><br> 
从 右 向 左 排列 文本 : < bdo dir = "rt1"> 欢 迎 来 到 冰 天 美 帝 </bdo> 
</body> 


被 HTML 5 赋予 语义 的 文本 控制 标签 如 下 。 

«abbr 用 于 表示 一 个 缩写 .使 用 title 属性 设置 缩写 的 全 称 。 

<address>: 用 于 表示 一 个 地 址 。 

<blockquote>: 用 于 定义 一 段 带 换行 的 ,大 段 的 引用 文本 ,浏览 器 会 使 用 缩 进 的 方式 
显示 被 引用 的 文本 ,使 用 cite 属性 指定 该 引用 文本 所 引用 的 URL 地 址 。 


= 








É @ fleW/DYmyweb/3-6html 

B 访问 最 多 O tess O 新 手 上 路 D 党 用 网 址 了 SR 
加 粗 文本 : 欢迎 来 到 冰 天 美 帝 

AUK: ACUDEBUKXOE 








BRA: XOUDEBIKK EE 
| 加 粗 文本 : 欢迎 来 到 冰 天 美 帝 


小 号 字体 文本 : 欢迎 来 到 冰 天 美 帝 


| 上 标 文本 ， 欢 迎 来 到 冰 天 美 帝 


‖ 下 标 文本 ， 次 迎 未 到 冰 天 美 帝 
从 左 向 右 排列 文本 ， 欢 迎 来 到 冰 天 美 帝 
[| 从 右 向 左 排列 文本 ， 帝 美 天 冰 到 来 迎 欢 














图 2-6 各 种 文本 控制 标签 的 效果 


<q>: 用 于 定义 一 段 不 带 换行 的 、 较 短 的 引用 文本 。 浏 览 器 会 为 这 段 被 引用 的 文本 添 
Jn C") ,使 用 cite 属性 指定 该 引用 文本 所 引用 的 URL 地 址 。 

<cite>: 用 于 表示 作品 (一 本 书 一 首 歌 ,一 部 电影 等 ) 的 标题 。 

<code>: 用 于 表示 一 段 计算 机 代码 。 

<din>: 用 于 定义 一 个 专业 术语 。 

<del>; 用 于 定义 文档 中 被 删除 的 文本 ,浏览 器 通常 会 加 上 删除 线 的 形式 显示 该 文本 。 

<ins>; 用 于 定义 文档 中 搬入 的 文本 ,浏览 器 通常 会 以 加 上 下 划 线 的 形式 显示 该 文本 。 

<pre>: 用 于 表示 该 标签 所 包含 的 文本 已 经 进行 了 “ 预 格式 化 ”。 

<samp>: 用 于 定义 示范 文本 内 容 。 

<kbd>; 用 于 定义 键盘 文本 。 

vari 用 于 表示 一 个 变量 。 

使 用 了 上 述 语义 相关 的 标签 来 定义 相关 内 容 的 代码 如 下 ,浏览 器 显示 效果 如 图 2-7 
所 示 。 


<!doctype html > 
<html> 
<head> 
<meta charset = "utf — 8"> 
<title > 语义 相关 标签 </title> 
</head> 
<body> 





ne2 em sm [c 


冰 天 美 帝 的 缩写 是 < abbr title = " 冰 天 美 帝 "> btmd </abbr >, 这 是 < address > 上 海 </address > 的 一 家 
电子 商务 公司 。< br><br> 
<p> 下 面 是 一 段 JS 脚本 代码 : <br> 
<code> 
function showImg( index){< br» 

var $ rollobj= $ (".banner");< br> 

var $ rolllist= $ rollobj. find("div a");<br> 

var newhref = $ rolllist. eq( index). attr("href") ;<br> 

}<br> 

</code ></p> 
<p>< dfn> JavaScript </dfn> 是 一 种 客户 端 脚本 语言 。< var > $ rollobj </var >,< var > $ rolllist 
</var> 是 脚本 中 定义 的 变量 。</p> 
<p>E &lt;headggt; 头 部 标签 中 引信 外 部 脚本 程序 ,可 使 用 如 下 示例 代码 : <br> 
<samp> 
&lt;script type = &quot; text/javascript&quot; &gt;< br > 
js 脚本 代码 区 < br > 
&lt;/script&gt; 
</samp ></p> 
<p> 如 果 要 测试 与 网 络 上 某 台 主机 的 连通 性 , 可 使 用 命令 : < kbd > ping 对 方 IP Hh hk</kbd ></p> 
<cite> 望 月 怀远 </cite> 
<pre> [fF #] 张 九 龄 </pre> 
<blockquote> 
海上 生 明 月 , REJ. WAWER, SEHE. <br> 
灭 烛 怜 光 满 , 披 衣 觉 露 滋 。 不 堪 盈 手 赠 , HE BEBE AES. </blockquote> 
<p> Android 是 一 个 < del > 开发 </del >< ins > 开放 </ins > 式 的 手机 、 平 板 电脑 操作 系统 </p> 
</body > 
</html> 








订 天 美 帝 的 缩写 是 btmd, 这 是 
上 上海 
的 一 家 电子 商务 公司 。 


| 下面 是 一 段 Js 秆 本 代码 
function showImg (index) { 
var $rollobj=$(". banner”) ; 
var $rolllist-$rollobj. find (“div a”); 
var neshref-$rolllist. eq (index). attr (“href”) ; 
) 


JavaScript 2—WE PURMAIES - Srollobj. frolllist& WI tog BEER. 


在 thead》 头 部 标签 中 引入 外 部 脚本 程序 ， 可 使 用 如 下 示例 代码 ， 
<script type=" text/javascript”) 
js 脚本 代码 区 
</script> 
如 果 要 测试 与 网 络 上 某 台 主机 的 连通 性 ， 可 使 用 命令 ，ping 对 方 IP 地 址 
BARE 
[作者 ] KN 
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Android — | FSFRAN FA. FARRER 





图 2-7 用 标签 定义 内 容 效 果 
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(3) 图 像 标签 
<img>: 用 来 描述 在 网 页 中 插入 的 图 像 。 网 页 中 可 以 插入 的 图 像 格 式 有 IPG 格式 、 
GIF 格式 和 PNG 格式。 其 使 用 格式 如 下 。 


< ing src = "images/logo. png" alt = " 冰 天 美 帝 网 站 Logo" 


<img> br £f WP SE HR E. 
O sre: 用 于 指定 加 载 图 像 的 路 径 ,路 径 可 以 是 绝对 路 径 , 也 可 以 是 相对 路 径 。 通常 我 


一 一 一 一 一 一 们 会 在 站 点 中 为 图 片 创建 独立 的 文件 夹 ,一 般 图 片 文件 夹 名 为 images 
aX img. sre 属性 是 一 img 标签 中 必需 的 属性 。 


© alt: 用 于 指定 图 像 的 替换 文本 ,用 文字 的 方式 描述 图 像 。 当 
图 2-8 alt RES ”用 户 因 图 像 加 载 失 败 等 原因 无 法 看 到 图 像 时 可 以 看 到 蔡 换文 本, 显 
示 效 果 如 图 2-8 所 示 。 
(4) 超 链 接 标签 
超 链接 标签 二 a 二 用 来 定义 超 链接 ,用 于 从 一 个 页 面 链 接 到 另 一 个 页 面 。 
去 a> 标 签 有 如 下 三 个 重要 的 属性 。 
(D href: 用 来 指定 链接 目标 ,可 以 是 一 个 站 点 的 URL, 一 个 站 内 页 面 的 相对 地 址 ,或 是 
一 个 E-mail 地 址 ,也 可 以 是 “# ”表示 空 链接 ,以 引发 onclick 鼠标 事件 。 
@ target: 用 来 指定 链接 目标 位 置 ,其 属性 值 可 以 是 _self、_blank、_top、_parent 四 个 
值 ,分 别 代表 自身 窗口 .新 窗口 .顶层 框架 和 父 框 架 。 
© media: 用 来 在 指定 了 href 属性 后 ,指定 目标 URL 所 引用 的 媒体 类 型 ,默认 为 all。 
在 使 用 二 a 二 标签 创建 超 链接 时 ,我 们 还 可 以 通过 name 属性 设置 锚 点 ,建立 在 网 页 内 部 
某 一 位 置 的 锚 点 链接 。 
使 用 超 链 接 标签 来 定义 相关 内 容 的 代码 如 下 ,浏览 器 显示 效果 如 图 2-9 Bros o 








<!doctype html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
<title > 超 链接 标签 </title> 
</head> 
< body> 
<! -- ft % fii A --> 
<a name = "top"></a> 
<! 一 在 当前 浏览 器 窗口 打开 当前 站 点 下 的 "新 品 速递 "网 页 -一 > 
<p><a href = "new. html" target = "” self"> 新 品 速 递 </a></p> 
<! 一 在 新 窗口 中 打开 冰 天 美 帝 网 站 —— > 
<p><a href = "http://www. ickbuy. com" target = "_blank"> 冰 天 美 帝 </a></p> 
<a href = "http://www. ickbuy. com" target =" blank">< img src = " images/logo. png"></a> 
<! -一 创建 邮件 超 链接 -一 > 
<p><a href = "mailto: admin@ ickbuy. com"> 与 我 联系 </a></p> 
<br><br><br>< br>< br>< br>< br>< br>< br>< br >< br>< br>< br>< br>< br>< br><br> 
<br>< br>< br>< br>< br>< br >< br >< br >< br>< br >< br >< br>< br >< br><br><br><br> 








<! -- 创建 链接 到 页 首 的 锚 点 处 -一 > 














<a href ="#top"> 返 回 顶 部 </a> 
</body> 
</html> 
| € 图 fle///D/myweb/3-8html ve) > | 三 
B 访问 最 多 [火狐 官方 站 点 门 新 手 上 路 LO RAME O ER »| 
新 品 速递 ^ 
AXE 
IJA 
与 我 联系 
图 2-9 ” 超 链接 效果 
(5) 列表 标签 


<ul>: 用 来 定义 无 序列 表 , 以 二 ul 二 开始 ,以 二 /ul 结束 。 每 个 列表 项 都 包含 在 
<>. </li> Ph, WRIA ERA AR EBL . 


<ol>: 用 来 定义 有 序列 表 , 以 二 ol 二 开始 ,以 二 /ol 二 结束 ,每 个 列表 项 都 包含 在 
二 li>... 达 /li 中 。 列 表 项 符号 默认 为 阿拉 伯 数 字 序 列 。 

<d>: 用 于 定义 列表 ,以 二 dl 二 开始 ,以 二 /dl 二 结束 。 在 二 dl 二 标签 中 可 以 包含 二 dt>.… 
二 /dt 二 定义 标题 列表 项 ,在 二 dt 二 标签 中 可 以 包含 二 dd 记 .…. 达 /dd 二 定义 内 容 列 表 项 。 

使 用 列表 标签 来 定义 相关 内 容 的 代码 如 下 ,浏览 器 显示 效果 如 图 2-10 所 示 。 


<!doctype html > 
<html> 


B samas | 





<head> 
<meta charset = "utf - 8"> 
<title > 列表 标签 </title> 
</head> 
<body> 
网 站 栏目 有 : 
<ul> 
<1i> 新 品 速递 </1i> 
<1i> 热 卖 推 荐 </1i> 
<1i> 商 品 分 类 </1i> 
</ul> 
冰激凌 品牌 有 : 
<ol> 
<1i> 哈 根 达 斯 </1i> 
<1i> 本 : 杰 瑞 </1i> 
<1i> 德 英 </1i> 
</ol> 
品牌 介绍 
<dl> 
< dt » [If fR 339 </dt > 
< dd >i 4 4 MF (Haagen - Dazs) 原 为 美国 冰激凌 品牌 , 1921 年 由 鲁 本 ' 马 特 斯 (Reuben Mattus) BERI 
成 功 , 于 1962 年 在 美国 纽约 布朗 克 斯 命名 并 上 市 。1983 年 , 哈 根 达 斯 出 售 给 品 斯 乐 公司 
(The Pillsbury Company) 之 后 , 品 斯 乐 公司 纳入 通用 磨坊 公司 (General Mills Inc. ) MEF, 
2002 年 党 巢 公司 已 经 收购 哈 根 达 斯 冰激凌 在 美国 全 部 注册 商标 权 。</dd> 
< dt AF: ASH </dt > 
<dd> 有 史 以 来 最 有 趣 的 公司 应 该 算 上 是 本 . 杰 瑞 。 这 家 生产 冰激凌 公司 的 创始 人 分 别 是 本 ' 科 
恩 和 杰 瑞 格林 菲尔德 。1978 年 ,他 们 拿 出 6000 美元 的 积蓄 , 又 向 科恩 的 父亲 借 了 2000 美 
元 ,租用 一 间 废 弃 的 加 油 站 , 将 加 油 站 稍微 装修 , p E nn HE, 于 是 名 为 “勺子 商店 ” 
(ScoopShop) 就 这 么 开张 了 。</dd> 
« dt [#8 )</dt > 
< dd> 德 英 是 世界 最 大 宠物 食品 和 休闲 食品 制造 商 美国 跨国 食品 公司 玛 氏 (Mars) 公 司 在 中 国 推出 
的 系列 产品 。1989 年 进入 中 国 。1995 年 成 为 中 国 版 块 巧克力 领导 品牌 , “牛奶 香 浓 , 丝 般 
感受 ?成 为 其 经 典 广 告 语 。</dd> 
«/di» 
</body> 
</html> 


(6) 表格 标签 
表格 标签 和 二 table 之 用 于 定义 表格 。 所 有 表格 标签 都 必须 包含 在 二 table >... 


</table>, 


<caption>: 用 于 定义 表格 的 标题 。 

<tr>: 用 于 定义 表格 行 。 在 表格 行 中 定义 单元 格 。 

<th>: 用 于 定义 表 头 单元 格 ,其 单元 格 中 的 文字 内 容 自动 加 粗 居中 。 

<td>: 用 于 定义 普通 单元 格 , 可 以 在 其 中 嵌 套 表格 。 通 过 colspan 属性 指定 该 单元 格 


跨 多 少 列 ,通过 rowspan 属性 指定 该 单元 格 跨 多 少 行 。 


— 














荐 
。 商 品 分 类 
PEE RIS: 


1， 哈 根 达 斯 
2， 本: 杰 瑞 
3. BE 


品牌 介绍 


【 哈 根 达 斯 】 
WARIANT (Haagen-Dazs) 原 为 美国 冰 激 痰 品牌 ，1921 年 由 鲁 本 : 马 特 斯 (Reuben Mattus) 研制 成 功 ， 于 
eee Ud biu en, 哈 根 达 斯 出 售 给 品 斯 乐 公司 (The Pillsbury Company) 之 
后 ， 品 斯 乐 公司 纳入 通用 磨坊 公司 (General Mills Inc.) 旗下 ，2002 年 淮 巢 公司 已 经 收购 喻 根 达 斯 订 激 
aa a RATRAN 标 权 。 


FRR ANY SEE ERA. ARH RAP BRE Zr AGIA BIA PEHA E 
ARAB. 1978F, AMUITRGOOO TTA, NUMER ANSE T 2000370, AADA, BO 
eo PERR, FEZA “ITAA” (ScoopShop) 就 这 么 开张 了 。 


德 英 是 世界 最 大 宠物 食品 和 休闲 食品 制造 商 美国 跨国 食品 公司 玛 氏 (Mars) 公司 在 中 国 推出 的 系列 产品 。 
1989 年 进入 中 国 。1995 年 成 为 中 国 版 块 巧克力 领导 品牌 ，“ 牛 奶 香 浓 ， 丝 般 感 受 ”成 为 其 经 典 广告 语 。 














图 2-10 列表 效果 


<tbody>: 用 于 定义 表格 的 主体 ,只 能 包含 过 tr 二 ... 达 /tr 二 标签 。 

<thead>: 用 于 定义 表格 头 。 

<tfoot>: 用 于 定义 表格 脚 。 

<tbody> , <thead> , —tfoot > PREM VA iE frr REK P f (7 3E £T 4) 4B AE H] — tbody b 
签 可 以 将 一 个 表格 分 为 几 个 独立 的 部 分 。 当 我 们 使 用 Ajax 编程 时 常常 需要 动态 修改 表格 
中 的 某 几 行 ,这 就 需要 一 tbody 二 标签 了 。 志 thead 二 可 以 表示 标题 行 ,二 tfoot 二 可 以 表示 表 
格 底部 的 统计 行 

使 用 表格 标签 定义 一 个 简单 表格 的 代码 如 下 ,浏览 器 显示 效果 如 图 2-11 所 示 。 


<!doctype html > 

<html> 

<head> 
<meta charset = "utf - 8"> 
<title> 表 格 标签 </title> 

</head> 

<body> 

< table width= "400" border = "1"> 

<caption> 


OE ems 





<hl > 冰 天 美 帝 冰 激 凌 </hl > 
</caption> 
<thead> 
<tr> 
<th width = "255"> 品 种 </th> 
<th width= "129"> 价 格 /规格 </th> 
</tr> 
</thead > 
< thody> 
<tr> 
<td>< img src = "images/mm. png"></td> 
< td >< span > X 68 </span > < span >/268g </span ></td> 
</tr> 
<tr> 
<td>< ing src = "images/bjr. png"></td> 
< td >< span > Y 74 </span> < span >/420g «/span ></td> 
</tr> 
</tbody> 
< tfoot > 
cem 
< td colspan = "2"><a href =" 井 "> 更 多 种 类 ...</a></td> 
</tr> 
</tfoot > 
</table> 
</body> 
</html> 







表格 标签 x 
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guy * 74 /420g 















































图 2-11 表格 效果 


ne2 em sm [OU 





15. HTML 5 新 增 的 通用 属性 


HTML 5 在 保留 了 原来 HTML 中 大 部 分 标签 功能 的 同时 ,也 为 这 些 标签 增加 了 一 些 
通用 属性 ,这 些 属性 使 HTML 元 素 的 功能 大 大 地 增强 。 

(1) contenteditable 属性 

HTML 5 为 大 部 分 HTML 标签 都 增加 了 contenteditable 属性 。 如 果 将 该 属性 设 为 
true, 那 么 浏览 器 将 会 允许 开发 者 直接 编辑 该 HTML 元 素 的 内 容 。 该 属性 还 具有 “可 继承 ” 
的 特点 , 即 父 元 素 是 “可 编辑 ”的 ,那么 它 的 子 元 素 默 认 也 是 可 编辑 的 。 

如 果 我 们 把 图 2-11 RAIRE <div>... </div> bs E H 3f Jg — div... / div 
标签 设置 contenteditable 二 "true" 属 性 值 ,那么 表格 中 的 数据 在 浏览 器 中 双击 后 即 可 变 为 可 
编辑 状态 ,如 图 2-12 所 示 。 





<body> 
<div contenteditable = "true" style = "width:500px;border:1px solid black"> 
< table width= "400" border = "1"> 
<! -- 原 表 格 内 容 --> 
</table> 
</div> 


</body> 








价格 /规格 





X 68 /268g 


























CERE 
X74 /420g 



































图 2-12 可 编辑 状态 
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(2) designmode 属性 
designmode 属性 相当 于 一 个 全 局 的 contenteditable 属性 ,如 果 把 整个 页 面 的 designmode 属 


性 设置 为 on, 该 页 面 上 所 有 可 支持 contenteditable 属性 的 标签 都 变 成 可 编辑 状态 ， 
designmode 属性 默认 值 为 off. 


(3) hidden 属性 
hidden 属性 支持 true, false 两 个 属性 值 ,如 果 设 置 某 个 标签 hidden 属性 为 true, KIRE 


浏览 器 窗口 不 显示 该 标签 内 容 。 


— 


如 下 代码 演示 了 hidden 属性 的 功能 ,显示 效果 如 图 2-13 所 示 。 


<!doctype html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
<title> hidden 属性 </title> 
</head> 
<body> 
<div id= "image" hidden = "true" 
< ing src = "images/mm. png"> 
</div> 
< button onclick = "var image = document. getElementById( 'image'); 
image. hidden = ! image. hidden;"> 显 示 / 隐 藏 </button > 
</body > 
</html> 
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图 2-13 ”隐藏 效果 


Ee: HTML 5 的 新 增 标签 


(1) 文档 结构 标签 
在 HTML 5 之 前 ,HTML 页 面 只 能 使 用 二 div 二 标签 作为 结构 标签 ,HTML 5 则 提供 








me em sm [OU 
了 丰富 的 结构 标签 。 


<article>: 它 用 于 描述 页 面 上 一 篇 完整 的 “文档 ”"。 在 文档 中 ,可 以 使 用 二 header 二 标 
签 来 定义 文档 的 “标题 ”; 使 用 二 footer 二 标签 来 定义 文档 的 “脚注 ”; 使 用 二 section 二 标签 把 
文档 内 容 分 成 几 个 段落 。 

<nav>: 它 用 于 定义 页 面 上 的 导航 条 ,包括 主导 航 、 侧 边 导航 、 页 面 导航 、 底 部 导航 等 。 
HTML 5 推荐 将 这 些 导航 分 别 放 在 相应 的 二 nav 二 标签 中 进行 管理 。 

<aside> ; 它 用 于 定义 当前 页 面 的 附属 信息 ,比如 网 页 的 侧 边栏 可 以 使 用 二 aside 二 标 
签 来 定义 。 

<hgroup>: (E HF 848 & 4- —h17 — <h> 3x FE B pi fel E o 

<figure>: "E HIT Ao — Bei vr R9 FE Fr DG, b AE PL n] GL — T S ET img 
da A Hr o YT DL G1 6 — A< figcaption > tr . KE MIKA Fr POS R  F fi 
[GRIS T <figure> pr E DH (8 FAL, BU V, e i zi CARS ln IE] 2-14 所 示 。 


< body > 
< figure style = "border:2px solid black; padding:5px;width:350px"» 
<figcaption><b> 冰 天 美 帝 经 营 的 冰激凌 产品 </b></figcaption> 
< ing src = "images/bjr. png"> 
< img src = "images/mm. png"> 





































</figure> 
</body > 
figure 标 签 
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图 2-14 <figure> REAR 

(2) 语义 标签 


<mark>; 它 用 于 显示 HTML 页 面 中 需要 重点 显示 的 内 容 , 就 像 用 荧光 笔 把 书本 上 重 
点 内 容 标注 出 来 一 样 。 
<time>: 它 用 于 显示 被 标注 内 容 是 日 期 \ 时 间或 者 日 期 时 间 。 


EUM emus 





示例 代码 如 下 ,浏览 器 显示 效果 如 图 2-15 所 示 。 


<body> 
<mark> 冰 天美 帝 </mark > 是 一 家 主 营 高 端 冰 激 凌 ,冷冻 甜品 的 电子 商务 公司 。< br > 
公司 决定 在 今年 < time datetime = "2015 — 05 — 01T09:00"> 劳 动 节 </time > 推出 周年 庆典 活动 。 











</body> 
yy wok 
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公司 决定 在 今年 劳动 节 推出 周年 庆典 活动 。 
图 2-15 语义 标签 效果 
(3) 特殊 功能 标签 


<meter>: 它 用 于 表示 一 个 已 知 最 大 值 和 最 小 值 的 计数 仪表 。 它 使 用 value 属性 指定 
计数 表 当 前 值 ; 使 用 min 属性 指定 计数 表 最 小 值 ; 使 用 max 指定 计数 表 最 大 值 ; 使 用 low 
属性 指定 计数 表 指 定 范围 的 最 小 值 ,其 值 要 大 于 等 于 min 属性 值 ; 使 用 high 属性 指定 计数 
表 指 定 范围 的 最 大 值 ,其 值 要 小 于 等 于 max 属性 值 ; 使 用 optimum 属性 指定 计数 表 有 效 范 
围 的 最 佳 值 。 

<progress>: 它 用 于 表示 一 个 进度 条 。 它 使 用 max 属性 指定 进度 条 完成 时 的 值 ,使 用 
value 属性 指定 进度 条 当前 完成 的 进度 值 。 

示例 代码 如 下 ,浏览 器 显示 效果 如 图 2-16 所 示 。 


<body> 
当前 行车 车 速 是 : <meter value= "100" min= "0" max="200" low- "0" high= "180"> 100 
</meter>km/s<br> 
本 月 项 目 完 成 度 为 : < progress value = "70" max = "100"> 70/100 </progress> 

</body> 
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图 2-16 <meter> bx 8 0 — progress > REAR 
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l 7. 一 audio 二 标签 


在 HTML 5 规范 出 现 之 前 ,如 果 希 望 在 网 页 上 播放 视频 .音频 ,需要 借助 第 三 方 插件 ， 
如 Flash 等 ,这 需要 在 浏览 器 上 安装 搬 件 ,HTML 5 的 出 现 改 变 了 这 种 现状 ,新 增 了 一 audio 二 
和 二 video 盖 两 个 标签 ,设计 者 可 以 通过 这 两 个 标签 在 HTML 页 面 上 播放 音频 视频。 使 用 
这 两 个 标签 播放 多 媒体 ,无 须 在 浏览 器 上 安装 任何 插件 ,只 要 浏览 器 本 身 支 持 HTML 5 规 
范 就 可 以 了 。 
< 一 audio> 标 签 能 够 播放 声音 文件 或 者 音频 流 , 其 属性 如 表 2-1 所 示 。 
表 2-1 一 audio> 标 签 的 属性 值 及 功能 描述 


属 性 值 功能 描述 

autoplay autoplay “| 如 果 出 现 该 属性 , 则 音频 在 就 绪 后 马上 播放 

controls controls 如 果 出 现 该 属性 , 则 向 用 户 显 示 控件 ,如 “播放 ”按钮 

loop loop 如 果 出 现 该 属性 , 则 每 当 音 频 结 束 时 重新 开始 播放 

如 果 出 现 该 属性 , 则 音频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 。 如 果 使 用 
autoplay 属性 , 则 忽略 该 属性 

src url 要 播放 的 音频 的 URL 














preload preload 











HTML 5 可 以 支持 的 音频 格式 如 表 2-2 所 示 o 
表 2-2 HTML 5 可 以 支持 的 音频 格式 











格式 IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 
Ogg v v v 

MP3 v v v 
WAV v v v 

















考虑 到 各 浏览 器 对 音频 的 支持 互 不 相同 ,可 以 借助 二 source 二 标签 的 src 属性 来 指定 音 
频 文 件 的 URL 3834 type 属性 来 指定 音频 文件 类 型 。 
示例 代码 如 下 ,浏览 器 显示 效果 如 图 2-17 所 示 。 


< body > 
<h2> 音频 播放 </h2 > 
<audio controls> 
<! -- 让 浏览 器 依次 选择 适合 自己 播放 的 音频 文件 -一 > 
< source src = "audio/demo. ogg" type = "audio/ogg"/> 
< source src = "audio/demo. mp3" type = "audio/mpeg"/> 
< source src = "audio/demo. wav" type = "audio/x- wav"/> 
</audio> 
</body> 
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图 2-17 一 audio 二 标签 效果 


| 8. <video> iR% 


HTML 5 HE T — ANE < video > bg 4e E LIA IY pr E 77 ifs HR PE ne 2-3 所 示 。 
表 2-3 二 video> 标 签 的 属性 值 及 功能 描述 
功能 描述 


属 性 


值 








autoplay 


autoplay 


如 果 出 现 该 属性 , 则 音频 在 就 绪 后 马上 播放 





controls 


controls 


如 果 出 现 该 属性 , 则 向 用 户 显示 控件 ,如 “播放 ”按钮 





loop 


loop 


如 果 出 现 该 属性 , 则 当 音 频 结束 时 重新 开始 播放 





preload 


preload 


如 果 出 现 该 属性 , 则 音频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 。 如 果 使 用 
autoplay 属性 , 则 忽略 该 属性 





src 


url 


要 播放 的 视频 的 URL 





height 


Pixels 


设置 视频 播放 器 的 高 度 





width 





Pixels 





设置 视频 播放 器 的 宽度 


HTML 5 可 以 支持 的 视频 格式 如 表 2-4 所 示 。 
表 2-4 HTML 5 可 以 支持 的 视频 格式 





























格 式 IE Firefox Opera Chrome Safari 
Ogg 不 支持 3.5 及 以 上 版 本 | 10.5 及 以 上 版 本 | 5.0 及 以 上 版 本 | 不 支持 
MPEG 4 9.0 及 以 上 版 本 | 不 支持 不 支持 5.0 及 以 上 版 本 | 3.0 及 以 上 版 本 
WebM 不 支持 4.0 及 以 上 版 本 | 10.6 及 以 上 版 本 | 6.0 及 以 上 版 本 | 不 支持 





考虑 到 各 浏览 器 对 视频 的 支持 互 不 相同 .可 以 借助 一 source 二 标签 的 src 属性 来 指定 视 
频 文件 的 URL 3831 type 属性 来 指定 视频 文件 类 型 。 
示例 代码 如 下 ,浏览 器 显示 效果 如 图 2-18 所 示 。 


—o 








< body> 
<h2> 视频 播放 </h2 > 
« video width= "500px" height = "300px" controls > 
< source src = "video/movie. webm" type = "video/webm"> 
</video> 
</body> 
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图 2-18 <video> RRR 
b 任务 实施 


I. 构建 网 页 结构 


以 构建 冰 天 美 帝 首页 的 基本 页 面 结构 为 例 , 来 讲解 构建 网 页 结构 的 具体 步骤 。 

网 页 文档 的 开始 和 结束 用 二 html 二 .一 /html 二 表示 。 志 !doctype html 二 是 文档 类 型 
声明 DTD ,是 指示 浏览 器 使 用 哪个 HTML 版 本 进行 编写 的 指令 。lang 一 "zh-cn" 说 明 这 个 
html 内 容 是 以 中 文 为 显示 和 阅读 基础 。 二 meta charset 王 "utf-8" 二 用 来 定义 使 用 的 字符 集 . 
为 了 设置 TE 浏览 器 兼容 模式 ,需要 添加 二 meta http-equiv — " X-UA-Compatible" content = 
"IE=edge" 之 。 在 网 页 中 可 见 部 分 的 内 容 都 放置 在 二 body 之 和 所 /body 之 之 间 。 基 本 的 网 
页 结构 代码 如 下 。 





EUM o samasse 





<!doctype html > 

<html lang = "zh 一 cn"> 

<head> 
<meta charset = "utf 一 8"> 
<meta http- equiv = "X— UA - Compatible" content = "IE = edge"> 
< title > 欢迎 来 到 冰 天 美 帝 </title> 

</head> 


</html> 


l2 添加 网 页 内 容 


添加 如 图 1-5 所 示 的 网 页 内 容 , 如 列表 、 图 片 等 元 素 , 其 操作 步 又 如 下 。 

(1) 分 析 元 素 

在 图 1-5 所 示 的 页 面 中 ,有 图 片 内 容 和 文字 内 容 , 其 中 导航 菜单 “ 冰 天 美 帝 新 闻 ” 和 整 
齐 排 列 的 产品 图 片 等 都 可 以 被 看 成 是 无 序列 表 。 

“ 冰 天 美 帝 新 闻 ” 可 以 用 如 下 HTML 代码 表示 。 


<ul> 
<li><a href ="#"> 奇 人 ~ 伊拉克 画家 竟然 这 么 用 冰激凌 !1</a></1i> 
<li><a href = " & "> 冰激凌 有 助 怀孕 </a></1i> 
<li><a href ="#"> 英 国 鼓 励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
<li><a href ="#"> 奇 人 ~ 伊拉克 画家 竟然 这 么 用 冰激凌 1!</a></1i> 
<li><a href = " # "> 冰激凌 有 助 怀孕 </a></1i> 
<li><a href ="# "> 英国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
</ul> 


在 导航 菜单 的 商品 分 类 菜单 下 ,又 有 二 级 菜单 ,同样 ,我 们 可 以 将 它们 用 无 序列 表 来 表 
示 , 代 码 如 下 。 


<ul> 
<li><a href = " # ">Ë W</a></li> 
<li><a href = " # ">i m BiB</a></li> 
<li><a href ="#"> 热 卖 推荐 </a></1i> 
<li><a href ="#"> 商 品 分 类 </a> 
ans <! 一 -二 级 菜单 列表 --> 
<li><a href ="#"> 险 根 达 斯 </a></1i> 
<li><a href = " # "> M&anp;M'S </a></li> 
<li><a href ="#"> 本 . 杰 瑞 </a></1i> 
<li><a href =" 井 "> 德 芙 </a></1i> 
</ul> 
</li> 
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<li><a href ="+">(h Wi </a></li> 
<li><a href ="#"> 会 员 活 动 </a></1i> 
</ul> 


(2) 添加 网 页 内 容 

整个 页 面 可 以 分 为 5 块 内 容 , 分 别 是 头 部 的 Logo 图 像 等 .中 间 的 Banner 大 图 .中 间 靠 
左 的 产品 图 片 列表 ,中 间 靠 右 的 广告 和 新 闻 列表 ,以 及 底部 的 版 权 信息 。 为 了 以 后 的 CSS 样 
式 控制 ,我 们 将 相关 内 容 容纳 在 div 之 这 个 区 块 标签 中 。 最 终 的 完整 HTML 代码 如 下 
BUR o 


<! -- WW Logo ER -> 
«div» 
<div> 
< img src = "images/logo. png"> 
</div> 
<div> 
<ul> 
<li><a href = " # "> Hi</a></li> 
<li><a href ="#"> 新 品 速递 </a></1i> 
<li><a href ="#"> 热 卖 推 荐 </a></1i> 
<li><a href="#"> 商 品 分 类 </a> 
<ul> 
<li><a href ="#"> 险 根 达 斯 </a></1i> 
<li><a href = " # "» M&anp;M'S </a></li > 
<li><a href ="#"> 本 : 杰 瑞 </a></1i> 
<li><a href =" # "(fü X-/a»-/li» 
</ul> 
</li> 
<1i><ahref="#"> 品 牌 故 事 </a></1i> 
<li><a href ="#"> 会 员 活 动 </a></1i> 
</ul> 
</div> 
</div> 
«t -- 中 间 的 Banner 大 图 --> 
< ing src = "images/banner. png" alt = "成 为 会 员 优惠 更 多 "> 
<! 一 -产品 图 片 列表 一 -> 
<div> 
<ul> 
<li> 
<div> 
<a href ="#"> 
< img src = "images/mm. png" 
</a> 
</div> 
<div> 
<div> 
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<a href - " £"» M&anp; M'S 巧克力 豆 冰 激 凌 </a> 


</div> 
<div> 
< span> X 68 </span> 
< span >/268g </span> 
</div> 
</div> 
<div> 
<a href - " £ "SJ AWW #</a> 
</div> 
</li> 
<! -- 此 处 省 略 其 他 5 个 1i 项 --> 
</ul> 
</div> 
<! 一 广告 和 新 闻 列 表 —— > 
<div> 
<div> 
<a href ="#"> 
< img src = "images/ickbuy— more. png" alt = "更 多 精 选 商品 "> 
< span> 更 多 精 选 商品 </span> 
</a> 
</div> 
<div> 
<a href="#"> 
< ing src = "images/ickbuy - ad. png" alt = "顺丰 快递 到 家 "> 
< span > 顺丰 快递 到 家 </span> 
</a> 
</div> 
<div> 
< h3 > 冰 天 美 帝 新 闻 < span ><a href = " 井 "> 更 多 </a></span></h3 > 
<ul> 
<li><a href ="# ">a A ~ HHL FE MM RIE RIK Z FA KOR! </a ></1i> 
<li><a href =" 井 "> 冰激凌 有 助 怀孕 </a></1i> 
<1i><ahref="#"> 英 国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快 乐 区 </a></1i> 
<1i><ahref="#"> 奇 人 一 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<li><a href ="+">K BORA Hh A</a></li> 
<li><a href = " # 3 [s Be oh TH IE UK /a ></1i> 
<1i><ahref="#"> 吃 冰激凌 刺激 大 脑 快 乐 区 </a></1i> 
</ul> 
</div> 
</div> 
<! 一 首页 尾部 -一 > 
<div> 


<p> COPYRIGHT © 冰 天 美 帝 </p> 
<p> 沪 ICP 备 13018738 号 -1 食品 流通 许可 证 SP3101151210050229 </p> 
</div> 
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此 时 ,页 面 的 HTML 内 容 就 添加 完成 了 ,显示 效果 如 图 2-19 所 示 
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图 2-19 添加 网 页 内 容 后 页 面 效 果 


1:. 实现 多 媒体 交互 


网 页 文字 和 图 片 等 信息 添加 完成 后 ,在 此 基础 上 增加 一 个 音频 元 素 。 因 为 不 同 浏览 器 
可 能 支持 不 同 的 音频 格式 ,所 以 可 以 利用 二 audio 二 标签 的 多 个 source 元 素 指定 不 同类 型 的 
音频 文件 ,从 而 让 浏览 器 使 用 可 识别 的 格式 ,在 页 面 中 增加 如 下 代码 。 


<audio controls = "controls"> 
< source src = "audio/demo. ogg" type = "audio/ogg"/> 
< source src = "audio/demo. mp3" type = "audio/mpeg" /» 


< source src = "audio/demo. wav" type = "audio/x— wav"/> 
</audio> 


必 o samasse 





项 目 总 结 


本 项 目 中 介绍 了 HTML 5 置 标语 言 的 基本 语法 ,从 基本 页 面 结 构 到 内 容 标签 ,还 介绍 
T HTML 5 新 增 的 通用 属性 和 新 增 的 标签 用 法 ,以 及 HTML 5 对 多 媒体 元 素 的 标签 支持 。 


课 后 练习 


通过 HTML 标签 完成 “ 冰 天 美 帝 ” 产 品 单 页 的 内 容 , 使 其 显示 效果 如 图 1-2 Bron 
提示 : 页 面 布局 可 采用 表格 标签 来 完成 。 














| 知识 目标 | 


了 解 CSS 的 基本 知识 。 

了 解 网 页 布局 基本 知识 。 
理解 盒 模型 原理 。 
理解 元 素 定位 的 方法 。 
理解 浮动 的 概念 。 

了 解 流 式 布局 和 弹性 布局 。 
T fi CSS 框架 的 原理 。 


| 技能 目标 | 


会 选择 合适 的 CSS 选择 器 。 

掌握 网 页 元 素 的 定位 方法 。 

掌握 使 用 CSS 进行 网 页 基本 布局 。 

能 够 制作 兼容 不 同 浏览 器 窗口 尺寸 的 布局 。 
会 使 用 CSS 框架 。 

能 够 使 用 960 框架 快速 布局 网 页 。 


| 素养 目标 | 


理解 网 页 元 素 布 局 的 思想 。 
探索 自 定 义 CSS 框架 。 
具有 设计 页 面 布局 的 能 力 。 


| 任务 ”进行 网 页 布局 。 | 


b 学 习 情 境 


小 黄 通 过 项 目 2 的 学 习 掌 握 了 HTML 5 基本 知识 ,开始 着 手 建设 网 站 。 首 先 需要 设计 
网 页 的 基本 结构 ,也 就 是 布局 。 

本 任务 主要 介绍 CSS 的 基本 概念 ,网 页 布局 的 知识 和 基本 方法 ,理解 盒 模型 .定位 以 及 
浮动 的 概念 ,通过 使 用 CSS 进行 网 页 布局 ,并 且 实现 固定 宽度 `. 流 式 和 弹性 布局 ,最 后 介绍 使 
用 CSS 框架 进行 网 页 布局 的 方法 。 


> 任务 描述 


接 下 来 要 根据 实际 需求 进行 网 页 布局 。 初 步 设计 公司 Logo、 导 航 列表 和 搜索 框 在 上 
面 ,这 里 称 为 头 部 ; 中 间 是 主 内 容 区 域 , 分 为 两 列 , 左 侧 是 产品 图 片 列表 , 右 侧 是 新 闻 列 表 ; 
下 面 放 署 公司 地 址 版 权 等 信息 。 布 局 如 图 3-1 所 示 。 

本 任务 的 主要 内 容 如 下 。 

(1) 设计 网 页 固定 宽度 的 布局 。 
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图 3-1 布局 效果 图 


(2) 根据 浏览 器 窗口 尺寸 自 适 应 的 布局 。 
(3) 利用 CSS 框架 快速 布局 。 

问题 引导 

(1) 什么 是 CSS? 

(2) 什么 是 网 页 布局 ? 

(3) 常见 的 网 页 布局 有 哪 几 种 ? 

(4) 如 何 实现 网 页 布局 ? 


b 任务 知识 


表格 布局 方式 使 代码 越 来 越 难以 理解 和 维护 ,而 CSS( 层 县 样式 表 ) 不 仅 可 以 控制 页 面 
的 外 观 ,并 且 将 文档 的 表现 部 分 与 内 容 分 隔 开 。 目 前 主流 网 站 都 是 采用 CSS 来 控制 样式 。 


Ji. 认识 css 


ZAFE K CSS(Cascading Style Sheets) 是 一 种 指定 文档 该 如 何 呈 现 给 用 户 的 语言 。 
它 给 我 们 带 来 很 多 好 处 ,如 避免 重复 、 更 容易 维护 ,以 及 为 不 同 目的 ,使 用 不 同 的 样式 而 内 容 
相同 。 

样式 可 以 被 定义 在 外 部 文件 (外 链 样式 ,如 style. css) ,也 可 以 在 页 面 的 头 部 定义 (内 联 
样式 ) ,或 者 定义 在 特定 的 元 素 身 上 (行内 样式 )。 

CSS 规则 主要 由 两 个 部 分 构成 : 选择 器 与 一 条 或 多 条 声明 ,结构 如 下 。 


一 -一 
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selector (declarationl; declaration2; ... declarationN } 


选择 器 通常 用 于 需要 改变 样式 的 HTML 元 素 。 
每 条 声明 由 一 个 属性 和 一 个 值 组 成 ,属性 是 希望 设置 的 样式 属性 ,每 个 属性 有 一 个 值 ， 
属性 和 值 被 冒号 分 开 , 结 构 如 下 。 


selector {property: value} 


CSS 注释 以 “/ « ”开始 ,以 “x* /” 结 束 。 养 成 良好 的 注释 习惯 会 给 将 来 的 阅读 和 维护 带 
来 很 大 的 方便 。 


B 选择 器 


(1) 基本 选择 器 

浏览 器 在 展示 一 个 文档 的 时 候 , 必 须要 把 文档 内 容 和 相应 的 样式 信息 结合 起 来 展示 , 结 
合 的 依据 就 来 自 CSS 的 选择 器 。CSS 选择 器 有 多 种 类 型 ,如 元 素 选择 器 、 类 选择 器 、IP 选择 
器 .通用 选择 器 等 。 掌 握 这 些 选 择 器 ,才能 灵活 地 设置 样式 效果 。 

(D 元 素 选择 器 。 文 档 的 元 素 是 最 基本 、 最 常见 的 选择 器 。 元 素 选择 器 又 称 为 类 型 选 
择 器 。 如 h2 (color: blues}. RACH 34. h2 级 别 的 标题 设置 为 蓝 色 。 设 置 的 元 素 可 以 是 
HTML 文档 中 所 有 的 标签 元 素 , 甚 至 是 二 html 二 标签 本 身 ,如 html {color:red;}) 使 文本 呈 
现 红色 。 

© 类 选择 器 。 除 了 元 素 名 称 , 还 可 以 在 选择 器 中 使 用 属性 值 .这 样 就 可 以 更 具体 地 描 
述 规则 。 其 中 ,class 和 id 两 个 属性 比较 重要 。 通 过 设置 元 素 的 class 属性 ,可 以 为 元 素 指 定 
类 名 ,类 名 由 开发 者 自己 指定 。 文 档 中 的 多 个 元 素 可 以 拥有 同一 个 类 名 。 在 写 样式 表 时 ,类 
选择 器 是 以 英文 句号 *. ”开头 的 。 

如 下 代码 中 ,二 p 二 标签 元 素 具 有 class 属性 。 


<p class = "key"> 


在 一 个 CSS 样式 表 中 ,下 面 代码 中 的 规则 会 使 所 有 class 属性 等 于 key 的 元 素 文字 的 颜 
色 为 绿色 。 


-key { 
color: green; 


} 


© ID 选择 器 。 通 过 设置 元 素 的 id 属性 为 该 元 素 指定 ID 名 ,ID 名 由 开发 者 定义 。 需 要 
注意 的 是 : 每 个 ID 在 文档 中 必须 是 唯一 的 。 在 写 样 式 表 时 ,ID 选择 器 是 以 *# "开头 的 。 
例如 ,下 面 代码 中 的 规则 会 使 id 等 于 principal 的 元 素 字 体 大 小 为 20px。 
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# principal( 
font - size: 20px; 
} 


CD 通用 选择 器 。 通 用 选择 器 用 一 个 星 号 ”* ”表示 , 它 的 作用 是 匹配 所 有 的 可 用 元 素 。 
如 下 代码 实现 了 去 除 页 面 中 所 有 元 素 的 内 边 距 和 外 边 距 的 功能 。 


*( 
padding:0; 
margin:0; 
) 


(2) 伪 类 选择 器 
CSS 伪 类 是 加 在 选择 器 后 面 的 用 来 指定 元 素 状态 的 关键 字 。 比 较 常见 的 链接 状态 就 是 
使 用 伪 类 选择 器 来 实现 的 。 如 下 代码 可 以 实现 未 访问 链接 .已 访问 链接 .鼠标 悬 停 和 选 定 的 


链接 效果 。 
a:link (color: # FF0000} /* 未 访问 的 链接 */ 
a:visited (color: #00FF00} /V* 已 访问 的 链接 * / 
a:hover (color: #FF00FF} /* 鼠标 移动 到 链接 上 * / 


a:active (color: #0000FF} /* 选 定 的 链接 * / 


注意 : 在 CSS 定义 中 ,a:hover 必须 被 置 于 a:link Al a:visited 之 后 , 才 是 有 效 的 。a: 
active 必须 被 置 于 a:hover 之 后 , 才 是 有 效 的 。 
:first-child 用 于 向 元 素 的 第 一 个 子 元 素 添加 样式 。 例 如 : 
<div> 
< span > 这 里 是 绿色 显示 。</span> 


< span > 这 里 不 是 绿色 。</span> 
</div> 


对 以 上 代码 设置 如 下 样式 后 ,效果 如 图 3-2 所 示 。 


first-child 


CELL 


EEE 22 5258. 





3-2 : first-child 样式 实例 








K 3-1 所 示 为 常见 伪 类 名 称 及 其 功能 描述 。 
表 3-1 常见 伪 类 名 称 和 功能 描述 


























伪 类 名 称 功能 描述 

:link 向 未 访问 链接 添加 样式 

:visited 向 访问 过 的 链接 添加 样式 

:active 向 选 定 的 链接 添加 样式 

:hover 鼠标 悬 停 在 元 素 上 方 时 ,向 元 素 添 加 样式 

:focus 向 拥有 键盘 输入 焦点 的 元 素 添加 样式 

:first-child 向 元 素 的 第 一 个 子 元 素 添加 样式 

:lang 允许 创作 者 来 定义 制定 的 元 素 中 使 用 的 语言 
(3) 伪 元 素 选 择 器 


CSS 伪 类 用 于 向 某 些 选择 器 添加 特殊 的 效果 ,而 伪 元 素 用 于 将 特殊 的 效果 添加 到 某 些 
选择 器 。 

两 者 看 起 来 很 相似 ,都 是 与 选择 器 相关 ,而 且 都 是 添加 特殊 效果 ,但 是 它们 是 有 区 别 的 ， 
我 们 先 来 看 一 个 例子 。 


<style> 
p> i:first- child (color: red} 
</style> 
<p> 
<i> 第 一 个 i</i> 
<i> 第 二 个 i</i> 
</p> 


上 面 代码 采用 了 伪 类 :first-child, 其 效果 如 图 3-3 所 示 。 











图 3-3 伪 类 实例 
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如 果 我 们 希望 不 用 伪 类 而 达到 上 面 的 效果 , 那 需要 为 i 元 素 添 加 一 个 类 ,代码 如 下 。 


<style> 
. first -child (color: red} 

</style> 

<p> 
< i class = "first — child" —^ i </i> 
<i> 第 二 个 i</i> 

</p> 


接 下 来 ,再 看 伪 元 素 :firstletter,HTML 和 CSS 代码 如 下 ,效果 如 图 3-4 所 示 。 


<style> 
p:first- letter{color: red; } 
</style> 
<p> 
这 里 第 一 个 字 为 红色 。 
</p> 





这 里 第 一 个 字 为 红色 。 





图 3-4 伪 元 素 实例 


同样 ,如 果 还 是 不 希望 用 伪 元 素 达 到 图 3-4 所 示 的 效果 ,我 们 就 需要 为 第 一 个 字 添 加 一 
个 二 span 二 ,然后 给 一 span 二 添加 样式 ,代码 如 下 。 


<style> 
. first - letter{color: red; } 
</style> 
<p> 
< span class = "first — letter"> 这 </span> 里 第 一 个 字 为 红色 。 
</p> 


从 这 个 例子 中 我 们 可 以 看 出 : 伪 类 的 效果 可 以 通过 添加 一 个 实际 的 类 来 达到 ,而 伪 元 
素 的 效果 需要 通过 添加 一 个 实际 的 元 素 才能 达到 。 
注意 : : first-letter 伪 元 素 只 能 用 于 块 级 元 素 。 表 3-2 是 常见 伪 元 素 的 属性 及 含义 。 
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R32 常见 伪 元 素 的 属性 及 含义 




















属 性 me 
:first-letter 向 文本 的 第 一 个 字母 添加 特殊 样式 
:first-line 向 文本 的 首 行 添加 特殊 样式 
:before 在 元 素 之 前 添加 内 容 
:after 在 元 素 之 后 添加 内 容 
(4) 属性 选择 器 


属性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 
例如 ,将 所 有 包含 标题 的 元 素 变 成 红色 ,可 以 用 以 下 代码 。 


<style> 
* [title]( color: red; } 
</style> 
<p> 这 里 没有 title 属性 </p> 
<ahref="#" title= "titlel"> 这 里 是 具有 title 属性 的 链接 。</a> 


实现 的 效果 如 图 3-5 所 示 。 


£ 





| 这 里 没有 title 属 性 
这 里 是 具有 title 属 性 的 链接 。 





图 3-5 属性 选择 器 实例 


还 可 以 根据 多 个 属性 进行 选择 ,只 须 将 属性 选择 器 链接 在 一 起 即 可 。 例 如 ,a[href] 
[title ]{color;red; } AMAA href 和 title 属性 的 HTML 超 链 接 的 文本 设置 为 红色 。 也 可 
以 根据 具体 属性 值 来 缩小 选择 范围 ,如 a[ href — " http://www. whit. ah. cn" ] (color: red; } 
使 只 有 指向 Web 服务 器 上 某 个 指定 地 址 的 超 链 接 变 成 红色 。 

表 3-3 是 属性 选择 器 类 型 及 其 功能 描述 。 根 据 某 个 属性 是 否 存在 或 属性 的 值 来 寻找 元 
素 , 能 够 实现 很 强大 的 效果 。 

表 3-3 属性 选择 器 类 型 及 其 功能 描述 














选 择 器 功能 描述 
[attribute] 用 于 选取 带 有 指定 属性 的 元 素 
[attribute= value] 用 于 选取 带 有 指定 属性 和 值 的 元 素 
[attribute~ = value] 用 于 选取 属性 值 中 包含 指定 词汇 的 元 素 
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续 表 
选 择 器 功能 描述 
[attribute| — value] 用 于 选取 带 有 以 指定 值 开 头 的 属性 值 的 元 素 , 该 值 必须 是 整个 单词 
[attribute ^= value] 匹配 属性 值 以 指定 值 开头 的 每 个 元 素 
[attribute$ — value] 匹配 属性 值 以 指定 值 结尾 的 每 个 元 素 
[attribute * — value] 匹配 属性 值 中 包含 指定 值 的 每 个 元 素 





E CSS 属性 


CSS 属性 可 以 分 为 字体 属性 、 颜 色 及 背景 属性 ,文本 属性 、 方 框 属性 等 几 类 。 表 3-4 为 






























































常用 CSS 属性 及 其 功能 描述 。 
表 3-4 常用 CSS 属性 及 其 功能 描述 
属 性 功能 描述 
color 设置 文字 颜色 
font-family 设置 字体 
font-size 设置 字体 大 小 
font-style 设置 字形 样式 (正常 或 斜体 ) 
font-weight 设置 是 否 加 粗 
text-align 设置 文本 水 平 对 齐 方 式 
text-decoration 设置 文本 修改 
background 设置 背景 
background-color 设置 背景 颜色 
background-position 设置 背景 固定 位 置 
background-repeat 设置 背景 是 否 重复 
width 设置 宽度 
height 设置 高 度 
z-index 设置 Z 轴 高 度 ( 是 否 在 另 一 个 元 素 之 上 ) 
visibility 设置 显示 或 隐藏 
border 设置 边框 
border-color 设置 边框 颜色 
border-style 设置 边框 样式 
padding 设置 内 间距 
magin 设置 外 边 距 








在 后 面 的 学 习 中 ,我 们 通过 实例 来 逐渐 认识 CSS 的 属性 。 
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(DES 
在 一 个 样式 表 中 ,我 们 往往 会 发 现 对 于 同一 个 元 素 会 有 两 个 或 者 更 多 的 规则 ,这 时 候 就 





OmES mxis [Od 
As Be AK S E ER LIU s Rob T Sob np 。 


XT EUBoEUL JUS = A ESE AY PE OOK US ; 浏览 器 对 HTML 定义 的 默认 样式 ,用户 定 
义 的 样式 和 开发 者 定义 的 样式 。 

其 中 ,开发 者 定义 的 样式 可 以 有 三 种 形式 : 定义 在 外 部 文件 (外 链 样式 )、 在 页 面 的 头 部 
定义 (内 联 样式 ) 和 定义 在 特定 的 元 素 身 上 (行内 样式 ) 。 

用 户 定义 的 样式 表 会 覆盖 浏览 器 定义 的 默认 样式 ,然后 网 页 开发 者 定义 的 样式 又 会 覆 
盖 用 户 样式 。CSS 另外 提供 了 一 个 !important 关键 字 , 用 户 可 以 通过 使 用 这 个 关键 字 使 自 
己 定 义 的 样式 覆盖 掉 开 发 者 定义 的 样式 。 因 此 , 层 秋 采用 以 下 次 序 重要 度 递减 。 

(D 标 有 !important 的 用 户 样 式 。 

( 标 有 !important 的 开发 者 样式 。 

G 开发 者 样式 。 

@ 用 户 样 式 。 

C) 浏览 器 /用 户 代 理应 用 的 样式 。 

如 果 两 个 规则 的 特殊 性 相同 , 那 后 定义 的 规则 优先 。 

(2) 继承 

CSS 的 一 个 主要 特征 就 是 继承 , 它 是 指 被 包含 在 内 部 的 标签 将 拥有 外 部 标签 的 样式 特 
征 。 例 如 ,在 二 body 二 中 定义 了 文本 颜色 为 红色 ,该 样式 也 会 应 用 到 内 部 段落 的 文本 中 。 

继承 这 一 特性 非常 有 用 ,因为 它 可 以 使 开发 人 员 不 必 在 每 个 元 素 的 后 代 上 添加 同样 的 
样式 。 例 如 , 想 实 现 所 有 元 素颜 色 为 红色 , 须 设置 以 下 代码 。 


p{color:red; } 

li{color:red; } 
hl{color:red; } 
ol{color:red;} 


上 面 的 代码 可 以 用 一 句 简 单 的 body{color:red; } 代码 来 实现 。 

不 过 ,不 是 所 有 属性 都 能 继承 的 。 例 如 ,border 属性 是 用 来 设置 元 素 的 边框 的 , 它 就 没 
有 继承 性 ,还 有 padding margin 等 属性 都 是 不 能 继承 的 。 

恰当 地 使 用 层 倒 可 以 简化 CSS, 同 样 ,恰当 地 使 用 继承 也 可 以 减少 代码 ,大 大 提高 开发 
效率 。 


[5 视觉 格式 化 模型 


CSS 视觉 格式 化 模型 是 用 来 处 理 文档 并 将 它 显 示 在 视觉 媒体 上 的 机 制 ,这 是 CSS 的 一 
个 核心 的 概念 。 视 觉 格式 化 模型 根据 CSS 盒 模型 为 文档 的 每 个 元 素 生成 0、1 或 多 个 盒 。 每 
个 盒 的 布局 由 下 列 内 容 组 成 。 

(1) ART: 明确 指定 、 受 限 或 没有 指定 。 

(2) BRA. 行内 行内 级 别 , 原 子 行内 级 别 和 块 盒 。 
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(3) 定位 方案 : 常规 流 、 浮 动 或 绝对 定位 。 

(4) 树 状 结构 中 的 其 他 元 素 : 它 的 子 代 与 同 代 。 

除 以 上 内 容 外 , 盒 的 布局 还 包括 视 口 尺寸 与 位 置 . 内 含 图 片 的 固定 尺 才 , 以 及 其 他 
信息 。 

一 个 盒 相对 于 它 的 包含 块 (有 时 又 称 父 容 器 ) 的 边界 来 浑 染 ,通常 盒 为 它 的 后 代 元 素 
建立 包含 块 。 注 意 盒 并 不 受 它 的 包含 块 的 限制 , 当 它 的 布局 跑 到 包含 块 的 外 面 时 称 为 
溢出 。 


Le: 块 级 元 素 与 块 级 盒 


当 元 素 的 CSS 属性 display X block, list-item 或 table 时 , 它 是 块 级 元 素 。 块 级 元 素 ( 比 
如 二 p 二 ) 视 觉 上 呈现 为 块 , 竖 直 排列 。 

每 个 块 级 元 素 至 少 生成 一 个 块 级 盒 , 称 为 主要 块 级 盒 。 主 要 块 级 盒 将 包含 后 代 元 素 生 
成 的 盒 以 及 生成 的 内 容 。 一 些 元 素 , 比 如 到 li ,生成 额外 的 盒 来 放置 项 目 符号 ,不 过 多 数 元 
素 只 生成 一 个 主要 块 级 盒 。 

块 级 盒 模型 是 CSS 中 最 重要 的 一 个 概念 ,定义 了 块 级 元 素 如 何 显示 以 及 如 何 交互 。 网 
页 中 的 每 个 元 素 都 可 以 被 看 成 是 一 个 矩形 区 域 ,这 个 矩形 区 域 由 内 容 、 填 充 、 边 框 , 边 界 组 
成 ,盒子 模型 的 结构 如 图 3-6 所 示 。 





定位 : static display: inline z: auto 
盒 模型 尺寸 基准 : content-box 


图 3-6 块 级 盒 模型 


图 3-6 所 示 是 通过 Firefox 浏览 器 下 firebug 插件 中 的 布局 功能 显示 的 一 个 基本 的 盒子 
模型 结构 图 ,由 内 而 外 由 元 素 内 容 、 内 边 距 .边框 和 外 边 距 组 成 。 

图 3-6 中 包括 蓝 色 区 域 在 内 的 整个 范围 是 网 页 块 级 元 素 的 大 小 。 内 边 距 是 内 容 和 边框 
之 间 的 空间 , 包 庄 内 容 区 域 。 如 果 在 元 素 上 添加 背景 , 则 背景 会 应 用 于 由 内 容 和 内 边 距 共同 
组 成 的 范围 。 修 改 内 边 距 ,边框 和 外 边 距 不 会 影响 内 容 区 域 的 范围 ,但 是 会 改变 元 素 整体 的 
大 小 。 
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内 容 是 指 在 块 级 元 素 中 的 显示 内 容 的 范围 。 在 W3C 标准 中 ,通过 CSS 定义 元 素 的 宽 
度 和 高 度 ,实际 是 定义 了 内 容 区 域 的 宽度 和 高 度 ; 但 是 在 早期 的 TE 浏览 器 中 ,宽度 和 高 度 
定义 的 范围 是 指 内 容 、 内 边 距 和 边框 范围 的 总 和 。 

内 边 距 .边框 和 外 边 距 可 以 对 应 于 一 个 元 素 的 上 、 右 、 下 、 左 进行 分 别 定义 ,也 可 以 简单 
地 对 四 个 位 置 同时 定义 。 外 边 距 可 以 设置 为 负 值 , 可 以 应 用 在 很 多 种 特殊 场合 。 内 边 距 、 边 
框 和 外 边 距 的 设置 是 可 选 的 ,默认 值 一 般 为 零 , 但 是 不 同 的 浏览 器 的 默认 值 会 有 所 区 别 , 可 
以 在 定义 页 面 样式 之 前 首先 对 元 素 的 margin 和 padding 等 进行 初始 化 ,代码 如 下 。 


*{ 
margin: 0; 
padding: 0; 
} 


这 种 对 所 有 网 页 元 素 都 设置 样式 的 方法 会 对 option 等 元 素 有 负面 的 影响 ,一 般 建 议 在 
定义 样式 之 前 引用 ”reset,css? 或 者 “normalize,css” 这 种 重 置 样式 库 。 


当 元 素 的 CSS 属性 display Wit $E (8 2J inline, inline-block 或 inline-table 时 , 称 它 为 行 
内 级 元 素 。 视 觉 上 它 将 内 容 与 其 他 行内 级 元 素 排列 为 多 行 。 典 型 的 如 段落 内 容 、 文 本 (可 以 
有 多 种 格式 ) 或 图 片 ,都 是 行内 级 元 素 。 

行内 级 元 素 生成 行内 级 盒 ,参与 行内 格式 化 上 下 文 。 参 与 生成 行内 格式 化 上 下 文 的 行 
内 级 盒 称 为 行内 盒 。 所 有 display:inline 的 非 替 换 元 素 生 成 的 盒 是 行内 盒 ,而 不 参与 生成 行 
内 格式 化 上 下 文 的 行内 级 盒 称 为 原子 行内 级 盒 。 这 些 盒 由 可 替换 行内 元 素 , 或 display 值 为 
inline-block 5X inline-table 的 元 素 生成 ,不 能 拆 分 成 多 个 盒 。 


le. 常规 流 和 相对 定位 


CSS 引擎 通过 定位 指定 盒 的 位 置 ,主要 使 用 以 下 几 种 定位 模型 。 

(1) 常规 流 盒 一 个 接 一 个 排列 。 

(2) 浮动 方案 将 盒 从 常规 流 里 提出 来 , 放 在 当前 盒 的 旁边 。 

(3) 绝对 定位 中 的 盒 坐 标 是 绝对 的 。 绝 对 定位 元 素 可 以 遮挡 住 使 用 其 他 定位 方案 的 元 素 。 

在 常规 流 中 , 盒 一 个 接着 一 个 排列 。 在 块 级 格式 化 上 下 文 里 面 , 它 们 纵向 排列 ， 在 行内 
格式 化 上 下 文 里 面 ,它们 横向 排列 。 当 position 为 static 或 relative, 并 且 float Jy none 时 ， 
会 触发 常规 流 。 

常规 流 分 为 静态 定位 和 相对 定位 两 种 情况 。 

COD 静态 定位 : position 值 为 static, 盒 的 位 置 是 常规 流 布局 里 的 位 置 。 

(2) 相对 定位 : position 值 为 relative. 盒 偏 移 位 置 由 这 些 属 性 定义 top, bottom, left 和 
right。 即 使 有 偏 移 ,仍然 保留 原 有 的 位 置 , 其 他 常规 流 不 能 占用 这 个 位 置 。 

如 果 对 一 个 元 素 进行 相对 定位 , 它 将 出 现在 它 所 在 的 位 置 上 。 然 后 ,可 以 通过 设置 垂直 
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或 水 平 位 置 ,让 这 个 元 素 “ 相 对 于 ” 它 的 起 点 进行 移动 。 

如 果 将 top 设置 为 20px, 那 么 框 将 在 原 位 置顶 部 下 面 20px 的 地 方 。 如 果 将 left 设置 为 
30px, 那 么 会 在 元 素 左边 创建 30px 的 空间 ,也 就 是 将 元 素 向 右 移 动 。 相 对 定位 的 样 例 代码 
如 下 。 





.my_div { 
background- color: # DDD; 
border: 1px dashed; 
width: 100px; 
height: 50px; 
margin: 5px; 
} 
# my_div_relative { 
position: relative; 
left: 30px; 
top: 20px; 
} 
<div class = "ny div"»«/div» 
<div class -"my div" id- "ny div_relative"></div> 


<div class = "my_div"></div> 


相对 定位 是 相对 于 元 素 原来 位 置 的 定位 ,根据 CSS — aT ------- 1 
中 设置 的 left 和 top 进行 移动 ,如 图 3-7 所 示 。 


le. 绝对 定位 pie ea eet i 


对 于 绝对 定位 方案 , 盒 从 常规 流 中 被 移 除 ,不 影响 党 top:20px 
规 流 的 布局 。 它 的 定位 相对 于 它 的 包含 块 ,相关 的 CSS ieftaop i 
属性 有 top, bottom,left 和 right. | | 
如 果 元 素 的 属性 position 为 absolute 或 fixed. 它 是 ! ' 
绝对 定位 元 素 。 | 
固定 定位 元 素 也 是 绝对 定位 元 素 , 它 的 包含 块 是 视 | 
口 。 当 页 面 滚动 时 它 固定 在 屏幕 上 ,因为 视 口 没有 移动 。 时- i 
设置 为 绝对 定位 的 元 素 框 从 常规 流 中 完全 删除 ,并 图 3-7 相对 定位 
相对 于 其 包含 块 定位 ,包含 块 可 能 是 文档 中 的 另 一 个 元 
素 或 者 是 初始 包含 块 。 元 素 原先 在 正常 文档 流 中 所 占 的 空间 会 关闭 ,就 好 像 该 元 素 原来 不 
存在 一 样 。 元 素 定位 后 生成 一 个 块 级 框 ,而 不 论 原来 它 在 常规 流 中 生成 何 种 类 型 的 框 。 
绝对 定位 使 元 素 的 位 置 与 文档 流 无 关 , 因 此 不 占据 空间 。 绝 对 定位 的 元 素 的 位 置 相对 
于 最 近 的 已 定位 祖先 元 素 ,如 果 元 素 没有 已 定位 的 祖先 元 素 , 那 么 它 的 位 置 相对 于 最 初 的 包 
含 块 。 绝 对 定位 的 样 例 代码 如 下 。 
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.my_div { 
background-color: #DDD; 
border: 1px dashed; 
width: 100px; 
height: 50px; 
margin: 5px; 
} 
# my_div_absolute { 
position: absolute; 
left: 30px; 
top: 20px; 
} 
<div class = "my_div"> divl </div> 
<div class ="my_div" id= "my div absolute"» div2 </div> 
<div class = "my div" div3 </div> 


图 3-8 所 示 的 是 绝对 定位 示例 ,id 为 my div absolute 
的 DIV 元 素 脱离 常规 流 , 相 对 于 最 近 的 祖先 元 素 定 位 ,覆盖 
住 另外 两 个 DIV 元 素 。 


fro. 浮动 


浮动 的 框 可 以 向 左 或 向 右 移 动 , 直 到 它 的 外 边缘 碰 到 
包含 框 或 男 一 个 浮动 框 的 边框 为 止 。 由 于 浮动 框 不 在 文档 
的 普通 流 中 ,所 以 文档 的 普通 流 中 的 框 表现 得 就 像 浮动 框 
不 存在 一 样 。 

要 使 用 浮动 定位 方案 ,元 素 CSS 属性 position 为 static 
或 relative, 然 后 设置 float AW none, WÈ float 设 为 left, 浮 动 由 行内 盒 的 开头 开始 定位 。 
如 果 设 为 right, 浮 动 定 位 在 行内 盒 的 末尾 。 

对 于 浮动 定位 方案 , 盒 称 为 浮动 盒 , 它 位 于 当前 行 的 开头 或 末尾 ,这 导致 常规 流 环绕 在 
它 的 周边 ,除非 设置 clear 属性 。 

如 图 3-9 所 示 , 当 DIVI 向 右 浮 动 时 ,此 元 素 脱离 文档 流 并 且 向 右 移动 ,直到 它 的 右边 缘 
碰 到 包含 框 的 右边 缘 。 





图 3-8 绝对 定位 示例 
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如 图 3-10 所 示 , 当 DIVI 向 左 浮动 时 , 它 脱离 文档 流 并 且 向 左 移动 ,直到 它 的 左边 缘 碰 
到 包含 框 的 左边 缘 。 此 外 ,由 于 此 时 DIVI 不 再 处 于 常规 流 中 ,所 以 它 不 占据 空间 ,覆盖 了 
DIV2 ,使 DIV2 从 页 面 中 消失 。 当 三 个 DIV 同时 向 左 浮动 时 ,DIV1 首先 左 浮动 并 且 碰 到 父 
元 素 包含 框 ,另外 两 个 框 向 左 浮动 直到 碰 到 前 一 个 浮动 框 。 





图 3-10 向 左 浮动 


如 图 3-11 所 示 ,如 果 祖 先 元 素 宽度 不 足 ,不 能 容纳 水 平 排列 的 3 个 浮动 元 素 ,那么 其 他 
浮动 块 向 下 移动 ,直到 有 足够 空间 的 地 方 。 如 果 浮 动 元 素 的 高 度 不 同 , 当 它 们 向 下 移动 时 可 
能 会 被 其 他 浮动 元 素 卡 住 。 





图 3-11 狭窄 祖先 元 素 下 的 左 浮动 


通过 浮动 技术 还 可 以 对 图 文 进行 混 排 。 如 果 浮 动 框 ( 图 像 ) 后 面 有 行 框 ( 文 本 ) 则 浮动 框 
旁边 的 行 框 被 缩短 ,给 浮动 框 留 出 空间 ,形成 文本 框 围绕 浮动 框 ,实现 图 文 混 排 效果 ,如 
图 3-12 所 示 。 
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图 3-12 图 文 混 排 
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在 实际 网 页 设计 过 程 中 ,经 常会 用 到 图 片 浮动 到 文本 块 的 左边 ,并 且 需 要 将 文本 和 图 片 
包含 在 另外 一 个 具有 背景 颜色 和 边框 的 元 素 中 ,一 般 会 使 用 以 下 代码 。 


. container { 
border: 1px dashed; 
width: 600px; 
background - color: gray; 
) 
.container img{ 
float: left; 
) 
. container p { 
width: 330px; 
float: right; 
) 


<div class = "container" 
< ing src - "default. png" alt - "图 像 "> 
< p> Some text.</p> 

</div> 


由 于 以 上 代码 中 的 一 img 过 和 二 p 二 两 个 元 素 的 浮动 脱离 了 文档 流 , 所 以 包围 图 片 和 文 
本 的 包含 框 不 占据 空间 。 如 果 想 让 包含 元 素 在 视觉 上 包围 浮动 元 素 ,一 般 可 以 通过 以 下 三 
种 方法 。 

CD 为 被 包含 内 容 区 域 添加 一 个 空 元 素 , 并 且 设 置 clear 属性 清除 。 

(2) 在 包含 内 容 的 容器 元 素 上 设置 overflow( 溢 出 ) 属 性 , 值 设置 为 hidden 或 auto, 

(3) 浮动 包含 的 容器 元 素 ,如 以 上 代码 则 需要 在 container 元 素 的 CSS 样式 中 设置 float 
属性 。 

图 3-13 为 容器 不 包含 浮动 元 素 的 原始 效果 ; 图 3-14 展示 了 使 用 以 上 三 种 方法 后 父 容 
器 包含 子 元 素 被 * 撑 开 ” 的 页 面 效 果 。 
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图 3-13 ”容器 元 素 不 包含 浮动 元 素 

















图 3-14 父 容器 包围 浮动 元 素 


添加 空 元 素 并 设置 clear 属性 的 代码 如 下 。 


# 在 CSS 定义 部 分 添加 
.clear { 
clear: both; 
} 
# 在 HTML 部 分 添加 
<div class = "clear"></div> 或 者 <br class = "clear" 


使 用 添加 空 元 素 的 方法 可 以 产生 所 需要 的 效果 ,但 是 会 添加 多 余 的 代码 。 
如 果 使 用 overflow 方法 , 则 可 在 包含 框 上 使 用 以 下 CSS 代码 。 


.container { 
GRUT css 
overflow: hidden; 


) 


直接 在 包含 框 上 应 用 浮动 会 对 下 一 个 元 素 产生 影响 。 为 了 解决 这 个 问题 ,有 些 情况 下 
需要 选择 浮动 布局 中 的 几乎 所 有 元 素 ,然后 使 用 一 些 合适 的 元 素 对 浮动 进行 清除 。 这 有 助 
于 减少 或 消除 多 余 的 标记 ,但 是 会 让 浮动 变 得 复杂 。 


|: 布局 


利用 CSS 的 定位 浮动 和 边 距 控制 可 以 很 好 地 实现 布局 。 布 局 有 多 种 结构 ,如 两 列 的 浮 
动 布局 .三 列 的 浮动 布局 。 图 3-15 所 示 为 两 列 布局 效果 . 左 侧 红色 区 域 设置 float:left; 右 侧 
绿色 区 域 设置 float:right。 代 码 如 下 。 


——® 








< style> 
.container{ 
width: 950px; 
margin: 0 auto; 
} 
.main( 
float: left; 
width: 650px; 
height: 500px; 
background - color: red; 
} 
. sidebar{ 
float: right; 
width: 280px; 
height: 500px; 
background: green; 
} 
</style> 
<! -一 以 下 为 body 部 分 内 容 --> 
<div class = "container"> 
<div class = "main"></div> 
<div class = "sidebar"></div > 
</div> 


^ x 
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图 3-15 两 列 布局 
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上 例 中 元 素 的 宽度 以 像素 为 单位 ,这 种 布局 类 型 称 为 固定 宽度 的 布局 。 这 种 布局 很 常 
见 , 但 是 缺点 是 无 论 窗 口 的 尺寸 有 多 大 ,它们 的 尺寸 始终 不 变 ,屏幕 尺寸 小 时 需要 滚动 来 显 
示 完 整 内 容 , 当 屏幕 尺寸 大 时 又 浪费 了 很 多 可 用 空间 。 为 了 解决 这 种 问题 ,人 们 提出 了 流 式 
布局 或 弹性 布局 。 

流 式 布局 的 尺寸 不 是 用 像素 ,而 是 用 百分数 来 设置 的 。 它 使 内 容 随 着 浏览 器 窗口 变 大 
而 增 大 宽度 , 随 着 浏览 器 窗口 变 小 而 减 小 宽度 。 

例如 ,下 面 的 代码 可 以 实现 流 式 布局 的 效果 ,如 图 3-16 所 示 。 


.main{ 
float: left; 
width:75 % ; 
height: 500px; 
background - color: red; 

) 

. Sidebar( 
float: right; 
width: 24 % ; 
height: 500px; 
background: green; 


^ 
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图 3-16 在 不 同 浏览 器 窗口 大 小 下 流 式 布局 的 效果 
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流 式 布局 也 有 缺陷 ,就 是 在 窗口 宽度 较 小 时 , 行 会 变 得 非常 窗 , 不 便于 阅读 。 因 此 ,可 以 
设置 min-width 属性 来 防止 布局 变 得 太 窗 。 同 样 的 道理 ,为 了 防止 行 变 得 过 长 ,可 以 设置 
max-width 属性 来 限制 最 大 宽度 。 或 者 设置 一 定 百分比 的 内 外 边 距 也 可 以 防止 列 变 得 

以 下 代码 设置 了 最 大 和 最 小 宽度 ,限制 了 内 容 过 宽 或 过 窄 的 情况 。 


.container{ 
width: 100% ; 
max- width: 100em; 
min 一 width: 40em; 
margin: 0 auto; 

} 


弹性 布局 相对 于 字号 (而 不 是 浏览 器 宽度 ) 来 设置 元 素 的 宽度 。 它 以 em 为 单位 设置 宽 
度 。 字 号 在 增 大 时 ,整个 布局 的 宽度 就 会 随 之 增 大 。 这 样 , 行 长 可 以 保持 在 可 阅读 的 范围 。 

一 般 默认 浏览 器 字号 为 16px,10px 大 约 是 16px 的 62. 5% , Br <body> ff] #5 ETE 
62.5% ,width 设置 为 920px 时 ,就 可 以 用 92em 表示 了 。 

以 下 代码 实现 了 弹性 布局 的 效果 , 它 会 随 着 文本 字号 的 增加 而 增 大 。max-width 限制 
布局 过 宽 。 现 在 很 多 浏览 器 支持 默认 页 面 缩放 ,但 是 对 于 老式 浏览 器 ,可 能 需要 考虑 使 用 弹 
性 布局 。 


body{ 
font- size: 62.5%; 
text- align: center; 
} 
. container 
{ width: 92em; 
max- width: 95 % ; 
margin: 0 auto; 
} 
.main( 
float: left; 
width:75 & ; 
height: 500px; 
background - color: red; 
) 
. sidebar{ 
float: right; 
width: 24%; 
height: 500px; 
background: green; 


Bc: 





112. 框架 布局 


CSS 框架 能 够 使 开发 人 员 快速 精准 地 设计 出 DIV 十 CSS 布局 , 它 具 有 如 下 优势 。 

(1) 大 大 加 快 开发 时 间 。 

(2) 文件 体积 非常 小 。 

O 有 丰富 的 文档 和 教程 。 

(4) 具有 清洁 的 结构 网 络 。 

不 过 , 它 也 有 自身 的 缺陷 。 首 先 必须 学 习 框 架 的 标签 ,对 于 刚 入 门 的 学 习 者 来 说 不 仅 要 
学 习 底层 语言 ,还 要 学 习 额 外 的 框架 ,要 求 似乎 有 点 高 。 另 外 ,它们 要 求 在 设计 中 必须 使 用 
特定 的 网 格 结构 。 如 果 选 用 了 某 个 框架 ,你 可 能 会 在 每 一 个 项 目 中 都 使 用 它 , 从 而 使 我 们 的 
思维 方式 和 设计 显得 有 点 伪 化 。 

目前 比较 流行 的 CSS 框架 有 960 CSS 框架 、Blueprint CSS 框架 、 雅 虎 YUI Grids 框 
架 等 。 


b 任务 实施 
小 黄 需 要 做 出 如 图 3-1 所 示 的 布局 效果 。 在 制作 过 程 中 ,分 别 采用 三 种 方式 来 设置 。 


第 一 种 是 采用 固定 宽度 的 布局 方法 ; 第 二 种 是 采用 自 适应 屏幕 大 小 的 流 式 布局 方法 ; 最 后 
用 已 有 的 960 CSS 框架 来 实现 快速 布局 。 


I. 设计 网 页 固定 宽度 的 布局 


进行 网 页 布局 时 ,首先 需要 利用 固定 宽度 来 布局 。 设 置 内 容 宽度 为 1020px, 框 架 主 要 
分 为 头 部 .主体 和 底部 三 大 块 ,其 中 主体 部 分 分 为 左 侧 产品 图 片 列表 , 右 侧 为 新 闻 列 表 , 具 体 
操作 步骤 如 下 。 

(1) 添加 文本 内 容 

分 别 以 类 header, main 和 类 footer 定义 头 部 .中 间 和 底部 三 个 区 域 , 中 间 采 用 两 列 布 
局 ,HTML 代码 如 下 。 


<div class = "container"> 
<div class = "header"> 这 里 是 头 部 </div> 
<div class = "pagebody"> 
<div class = "main"> 这 里 是 产品 图 片 列表 </div> 
<div class = "sidebar"> 这 里 是 侧 栏 新 闻 列 表 </div> 
</div> 


<div class = "footer"> 这 里 是 底部 </div> 
</div> 


(2) 设置 样式 
为 了 看 到 实际 效果 ,在 这 里 设置 了 高 度 和 背景 色 。 因 为 是 固定 宽度 布局 ,width 设置 为 
具体 的 像素 值 1020px。 产 品 图 片 列表 在 左 侧 ,设置 float 属性 值 为 left, 右 侧 的 新 闻 列 表 


— —$ 








float 属性 值 为 right, 代 码 如 下 。 


. container{ 
width: 1020px; 
margin: 0 auto; 
} 
. header( 
width: 1020px; 
height: 100px; 
background-color: #999; 
} 
.main{ 
width: 800px; 
height: 400px; 
background - color: red; 
float: left; 
) 
. sidebar{ 
width: 200px; 
height: 400px; 
background - color:green; 
float: right; 
) 
. footer( 
width: 1020px; 
height: 50px; 
background-color: #999; 
} 


此 时 ,底部 信息 并 没有 在 最 下 面 出 现 , 如 图 3-17 所 示 。 这 是 因为 前 面 元 素 设 置 浮动 后 
脱离 了 文档 流 , 遮 住 了 后 面 元 素 。 可 以 设置 pagebody 的 overflow 属性 值 为 hidden 来 解决 


该 问题 ,代码 如 下 。 


. pagebody{ 
overflow: hidden; 


} 


此 时 , 便 实现 了 固定 宽度 的 简单 布局 。 
|2. 根据 浏览 器 窗口 尺寸 自 适应 的 布局 











采用 固定 宽度 的 布局 有 一 些 缺陷 , 它 不 能 随 着 浏览 器 窗口 尺寸 的 变化 而 自动 调整 布局 ， 
存在 着 浪费 屏幕 空间 或 是 将 行 变 得 很 窗 而 不 便 阅 读 的 问题 。 下 面 制作 一 个 能 够 随 着 浏览 器 








窗口 尺寸 的 变化 进行 自 适应 调整 的 布局 ,效果 如 图 3-18 所 示 。 
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制作 根据 浏览 器 窗口 尺寸 自 适应 的 布局 操作 步 又 如 下 。 

CD 添加 文本 内 容 

本 部 分 代码 同 “ 设 计 网 页 固定 宽度 的 布局 "中 “添加 文本 内 容 ” 中 的 代码 。 

(2) 设置 CSS 样式 

大 多 数 浏 览 器 窗口 宽度 设置 为 1250px。 在 “设计 网 页 固定 宽度 的 布局 ”中 ,我 们 设置 的 
固定 宽度 是 1020px, 那 么 使 用 的 百分数 是 1020 二 1250X100% 二 81.6%。 类 main 部 分 设置 
T 74% 的 宽度 ; 类 sidebar 设置 了 24% 的 宽度 ; 剩 下 的 2 名 作为 它们 的 间隙 空间 ,代码 如 下 。 


.container{ 
width: 81.6%; 
margin: 0 auto; 
} 
. header( 
width: 100%; 
height: 100px; 
background-color: #999; 
} 
: pagebody( 
overflow: hidden; 
) 
.main( 
width: 74%; 
height: 400px; 
background- color: red; 
float: left; 
) 
. sidebar{ 
width: 24%; 
height: 400px; 
background - color: green; 
float: right; 
) 
. footer{ 
width: 100% ; 
height: 50px; 
background-color: #999; 


(3) 设置 最 大 最 小 宽度 

此 时 ,该 布局 能 够 恰当 地 伸缩 ,但 是 . 当 窗口 过 大 或 过 小 时 , 行 会 随 之 过 宽 或 过 窗 。 为 了 
使 得 文本 行 的 长 度 适合 阅读 ,可 以 在 container 中 增加 max-width 和 min-width 属性 ,代码 
如 下 。 
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max- width: 140em; 
min- width: 50em; 


至 此 ,一 个 便于 阅读 的 流 式 布局 就 实现 了 。 


Ls. 利用 CSS 框架 快速 布局 


利用 已 有 的 960 CSS 框架 实现 快速 布局 的 操作 步骤 如 下 。 

(1) 引入 样式 文件 

在 http://960. gs/ 中 可 以 下 载 框架 文件 包 , 下 载 后 需要 将 相关 的 CSS 文件 导入 项 目 , 用 
以 下 代码 来 实现 。 





< link rel = "stylesheet" type = "text/css" href = "css/reset.css"> 
< link rel = "stylesheet" type = "text/css" href = "css/960.css"> 
< link rel = "stylesheet" type = "text/css" href = "css/text.css"> 


我 们 往往 需要 在 此 框架 的 基础 上 增加 或 修改 样式 ,使 它 成 为 我 们 想 要 的 效果 。 不 过 , 建 
议 大 家 不 要 直接 编辑 960. css 文件 ; 否则 ,将 来 就 不 能 更 新 这 个 框架 。 正 确 的 做 法 是 创建 一 
个 自己 的 独立 的 CSS 文件 ,代码 如 下 。 


< link rel = "stylesheet" type = "text/css" href = "css/ickbuy 960. css"> 


(2) 应 用 框架 样式 

在 960 CSS 框架 中 ,可 以 选择 名 为 . container. 12,. container_16 和 . container_32 的 容 
器 class.. container. X 中 的 X 表 示 将 页 面 分 成 X 等 份 ,例如 ,. container_12 表示 将 页 面 进行 
12 等 分 ; . container_16 表示 将 页 面 进行 16 等 分 。960 CSS 框架 中 有 12、16、24、32 四 种 布 
局 方式 ,这 些 960px 宽 的 容器 是 水 平 居 中 的 ,此 处 我 们 选择 容器 为 12 列 ,代码 如 下 。 


<div class = "container_12"> 
<div class = "grid 12 header"> 这 里 是 头 部 </div> 
<div class = "grid 9 main"> 这 里 是 产品 图 片 列 表 </div > 
<div class = "grid 3 sidebar"> 这 里 是 侧 栏 新 闻 列 表 </div> 
<div class = "grid_12 footer"> 这 里 是 底部 </div> 

</div> 


grid 12 表示 占 12 列 。main 和 sidebar 使 用 了 grid 9 和 grid_3, 表 示 分 别 占 9 列 和 
3 列 , 它 们 刚好 占 满 整 行 12 列 ,效果 如 图 3-19 所 示 。 

为 了 得 到 如 图 3-1 所 示 的 效果 ,在 ickbuy_960. css 文件 中 还 需要 加 上 自 定义 的 样式 。 
为 元 素 定 义 另 外 的 类 名 称 ,并 设置 高 度 和 背景 色 , 代 码 如 下 ,就 可 以 出 现 如 图 3-1 所 示 页 面 
效果 。 
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. header( 
height: 100px; 
background-color: #999; 
} 
.main( 
height: 400px; 
background - color: red; 
) 
. Sidebar( 
height: 400px; 
background - color:green; 
) 
. footer( 
height: 50px; 
background-color: #999; 
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这 里 是 出 位 新闻 列 表 


过 里 是 产品 图 片 列表 
oves 





图 3-19 应 用 960 CSS 框架 后 效果 
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b 实 训 目 的 

熟悉 并 掌握 布局 的 方法 ,掌握 背景 的 设置 技巧 。 

b 实 训 内 容 

利用 前 面 介绍 的 技术 和 方法 ,制作 出 如 图 3-20 所 示 的 固定 宽度 布局 效果 ,其 中 侧 栏 新 
闻 列 表 具有 渐变 背景 。 
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图 3-20 固定 宽度 的 两 列 布局 效果 


b 实 训 步 又 


L. 设计 思路 


这 里 有 两 列 布局 , 左 侧 的 产品 图 片 列表 设置 为 左 浮动 ; 右 侧 的 新 闻 列 表 部 分 设置 为 右 
浮动 。 清 除 浮动 可 以 采用 本 项 目 中 介绍 的 方法 。 整 个 页 面 有 灰色 背景 ,在 设置 背景 图 片 时 
选择 reapeat-y 即 可 。 在 右 侧 新 闻 列 表 中 有 渐变 背景 ,这 里 需要 素材 图 片 nav_bg. png, 这 是 
一 个 水 平方 向 上 渐变 的 200pxX 1px 的 素材 图 片 。( 在 项 目 4 中 有 关于 背景 图 片 的 介绍 ) 


12. HTML 代码 


HTML 代码 如 下 。 


<div class = "container"> 
<div class = "header"> 这 里 是 头 部 </div> 
<div class = "pagebody"> 
< div class = "main"> 这 里 是 产品 图 片 列 表 </div> 
<div class = "sidebar"> 这 里 是 侧 栏 新 闻 列 表 </div> 
</div> 
<div class = "clear"></div> 
<div class = "footer"> 这 里 是 底部 </div> 
</div> 
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[5 设置 样式 


设置 样式 的 代码 如 下 。 


body{ 
background-color: # bbb; 
} 
. container{ 
background - color: white; 
width: 1020px; 
margin: 0 auto; 
} 
. header( 
width: 1020px; 
height: 100px; 
background-color: #999; 
} 
. pagebody( 
overflow: hidden; 
} 
.main( 
width: 800px; 
height: 400px; 
float: left; 
) 
. sidebar{ 
width: 200px; 
height: 400px; 
background- image: url(images/nav bg.png); 
background - repeat : repeat - y; 
float: right; 
) 
. footer( 
width: 1020px; 
height: 50px; 
background-color: #999; 
} 


这 样 就 实现 了 如 图 3-20 所 示 的 效果 。 
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/* 整个 页 面 灰色 背景 * / 


/* 设置 固定 宽度 为 1020px * / 
/* 居 中 */ 


/* 设置 背景 图 像 * / 
/*Y 轴 重复 显示 * / 


本 项 目 中 介绍 了 CSS 的 基本 概念 ,列举 了 CSS 的 常用 属性 ,介绍 了 层 熏 与 继承 的 概念 ， 


介绍 了 选择 CSS 选择 器 的 方法 ,讲解 了 块 级 元 素 、 行 内 元 素 的 含义 ,最 后 介绍 定位 、 浮 动 、 浮 
动 的 清除 以 及 三 种 布局 的 方法 。 


布局 是 网 页 设计 的 基础 ,掌握 了 定位 、 浮 动 和 边 距 的 含义 及 设置 ,那么 创建 自己 满意 的 
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布局 就 很 容易 了 。 
课 后 练习 
1. 准备 图 片 文件 bg. png ,制作 出 如 图 3-21 所 示 的 三 列 固定 宽度 布局 效果 。 
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图 3-21 三 列 布局 效果 


2. 利用 960 CSS 框架 做 出 如 图 3-21 所 示 的 布局 效果 。 
3. 尝试 利用 流 式 布局 方式 重新 设计 图 3-21 所 示 的 布局 。 





一 一 对 链接 应 用 样式 











| 知识 目标 | 

”了 解 链接 状态 的 种 类 。 

e 了解 背景 的 属性 。 

”了 解 特殊 链接 下 划 线 的 设置 方法 。 
”了 解 按钮 式 链接 的 设置 方法 。 

| 技能 目标 | 

”掌握 常用 链接 状态 的 样式 设置 。 
”能 够 通过 选择 器 设置 不 同 链接 对 象 的 样式 。 
”掌握 背景 的 设置 技巧 。 

”能 够 利用 背景 设置 特殊 的 链接 效果 。 
* 能 够 对 链接 对 象 设置 按钮 式 效果 。 
| 素养 目标 | 

。 培 养 自 学 的 能 力 。 

。 提高 网 页 设计 的 学 习 兴 趣 。 
”培养 团结 协作 的 精神 。 


| 任务 ”修改 链接 样式 


» 学 习 情 境 

在 掌握 页 面 布局 的 技术 后 ,小 黄 发 现 添加 了 HTML 内 容 的 链接 部 分 默认 样式 很 不 美 
观 , 需 要 对 页 面 链接 的 样式 进行 修改 。 

本 任务 首先 介绍 几 种 链接 状态 的 样式 设置 ; 再 介绍 CSS 背景 的 属性 ,利用 背景 为 链接 
元 素 设 置 不 同 的 效果 ; 最 后 介绍 按钮 式 链接 的 制作 方法 。 


b 任务 描述 


页 面 中 的 未 访问 链接 和 已 访问 链接 文字 都 是 深 灰色 ,除了 导航 菜单 的 鼠标 悬 停 颜色 不 
变 , 其 他 鼠标 悬 停 颜 色 为 #BBOF73; 新 闻 列 表 后 面 的 文字 “更 多 ”需要 右 对 齐 ,字号 略 小 ; 产 
品 图 片 列表 中 的 “加 入 购物 车 ”需要 设置 成 按钮 式 链接 效果 。 效 果 如 图 4-1 所 示 。 

本 任务 的 主要 内 容 如 下 。 

COD 修改 链接 默认 样式 。 

(2) 用 样式 区 分 不 同 链接 。 

(3) 创建 按钮 式 链接 。 

问题 引导 : 

(1) 如 何 修 改 链接 的 默认 样式 ? 
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图 4-1 修改 默认 链接 后 的 效果 
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(2) 修改 特殊 链接 样式 应 采用 什么 选择 器 ? 
(3) 如 何 实 现在 一 个 区 域内 都 是 链接 的 点 击 范围 ? 


b 任务 知识 


超 链接 是 指 从 一 个 网 页 指向 一 个 目标 的 连接 关系 。 正 是 因为 超 链接 , 才 使 得 网 页 可 以 
互联 ,这 是 万 维 网 的 基础 。 在 一 个 网 页 中 用 做 超 链 接 对 象 的 可 以 是 一 段 文 本 或 者 是 一 个 图 
片 。 不 过 默认 的 链接 效果 看 起 来 比较 沉闷 ,而 CSS 样式 却 可 以 让 它们 变 得 美观 起 来 。 


Ji. 链接 样式 


链接 的 特殊 性 在 于 能 够 根据 它们 所 处 的 状态 来 设置 它们 的 样式 ,链接 有 以 下 状态 。 

COD a:link 指 普通 的 、 未 被 访问 的 链接 。 

(2) a:visited 指 用 户 已 访问 的 链接 。 

(3) a:hover 指 鼠 标 指针 位 于 链接 的 上 方 。 

(4) a:active 指 链接 被 点 击 的 时 刻 。 

(5) a:focus 指 链接 对 象 获 得 焦点 时 。 

a:link 用 来 寻找 没有 被 访问 过 的 链接 。a: visited 用 来 寻找 被 访问 过 的 链接 。a:hover 
用 来 寻找 鼠标 悬 停 处 的 元 素 。a:active 用 来 寻找 被 激活 的 元 素 , 即 链接 被 单 击 时 。 如 果 需 要 
定义 鼠标 悬 停 状态 ,但 是 通过 键盘 移动 到 链接 上 ,就 需要 设置 a:focus。 

代码 “二 a href=" 4 "二 这 里 是 一 段 链接 文字 二 /a 二 ”, 上 默认 实现 的 效果 如 图 4-2 所 示 o 


简单 链接 效果 
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图 4-2 默认 链接 的 效果 
通过 以 下 代码 可 以 修改 链接 的 默认 样式 ,实现 的 效果 如 图 4-3 所 示 。 


a:link,a:visited{ 
color: red; 
text — decoration: none; 
font — weight: bold; 


setssm d 





a:hover,a:focus,a:active( 
text- decoration: underline; 
font- weight: bold; 


过， file///D:/A/link-html 





这 里 是 一 段 链接 文字 





图 4-3 修改 样式 后 链接 的 效果 


在 定义 样式 时 ,最 好 按照 以 下 顺序 来 定义 : a:link 一 a:visited>a:hover>a:focus/a:active。 


EL: 背景 


背景 是 CSS 中 一 个 重要 的 的 部 分 ,也 是 必需 的 CSS 的 基础 知识 之 一 。 背 景 既 可 以 是 彩 
色 背 景 , 也 可 以 是 图 片 背 景 。 

(1) background-color 

background-color 是 背景 颜色 属性 ,为 HTML 元 素 设 定 背 景 颜色 ,相当 于 HTML 中 的 
bgcolor 属性 。 

下 面 的 代码 表示 body 这 个 HTML 元 素 的 背景 颜色 是 蓝 色 的 。 


body (background- color: #25BOF3;} 


(2) background-image 

background-image 是 背景 图 片 属性 ,为 HTML 元 素 设 定 背景 图 片 . 相 当 于 HTML 中 
的 background 属性 。 

下 面 的 代码 为 body 这 个 HTML 元 素 设 定 了 一 个 背景 图 片 。 


body { background - image: url(img/5 - 4. png); } 


(3) background-repeat 
background-repeat 是 背景 重复 属性 , 它 和 background-image 属性 联合 使 用 以 决定 背景 
图 片 是 否 重复 。 如 果 只 设置 background-image 属性 , 没 设置 background-repeat 属性 , 则 图 
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片 既 横向 重复 ,又 纵向 重复 。 
* repeat-x: 背景 图 片 横向 重复 。 
* repeat-y: 背景 图 片 纵向 重复 。 
* no-repeat: 背景 图 片 不 重复 。 
下 面 的 代码 表示 图 片 横向 重复 。 


body { 
background — image: url(img/5— 4. png) ; 
background - repeat: repeat - x; 

} 


(4) background-attachment 


background-attachment 是 背景 附着 属性 , 它 和 background-image 属性 联合 使 用 以 决定 
图 片 是 跟随 内 容 滚动 还 是 固定 不 动 。 这 个 属性 有 两 个 值 ,一 个 是 scroll, 一 个 是 fixed. BRIA 


值 是 scroll, 
下 面 的 代码 表示 图 片 固定 不 动 ,不 随 内 容 深 动 而 动 。 


body { 
background- image: url(img/5— 4.png); 
background - repeat: repeat - x; 
background - attachment : fixed; 

} 


(5) background-position 


background-position 是 背景 位 置 属性 , 它 和 background-image 属性 联合 使 用 以 决定 背 


景 图 片 的 最 初 位 置 。 
下 面 的 代码 表示 背景 图 片 的 初始 位 置 距离 网 页 最 左面 50px, 距 离 网 页 最 上 面 70px。 


body { 
background - image: url(img/5— 4. png); 
background - repeat: no- repeat; 
background — position: 50px 70px; 

} 


(6) background 
background 是 背景 属性 , 它 是 设置 背景 相关 属性 的 一 种 快捷 的 综合 写法 ,包括 


background-color、background-image、background-repeat、background-attachment、background- 


position 等 属性 。 
下 面 的 代码 表示 网 页 的 背景 颜色 是 蓝 色 , 有 背景 图 片 , 并 且 背 景 图 片 横向 重复 显示 ,不 


随 内 容 滚动 而 动 ,背景 图 片 距 离 网 页 最 左面 50px, 距 离 网 页 最 上 面 70px。 
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body { 
background: # 25BOF3 url(img/5 - 4. png) repeat — x fixed 50px 70px; 
} 


[ 3. 创建 奇特 的 链接 下 划 线 


利用 背景 图 像 可 以 为 链接 创建 不 一 样 的 下 划 线 效果 。 在 本 例 中 有 两 个 素材 文件 ,下 划 
线 图 像 underline. png 和 具有 动画 的 underline-hover. gif, 可 以 使 用 下 面 代 码 实现 奇特 的 链 
接 下 划 线 效果 。 





< style type = "text/css"> 
a:link,a:visited{ 
color: #666; 
text — decoration: none; 
background: url(images/underline. png) repeat - x left bottom; 
} 
a:hover, a: focus, a:active{ 
background - image: url(images/underline - hover. gif); 
} 
</style> 
«t -- 下 面 为 body 部 分 -一 > 
<p><a href = "http://www. sina. com. cn"> 新 浪 网 </a></p> 
<p><a href = "http://www. whit. ah. cn"> 芜 湖 职业 技术 学 院 </a></p> 


效果 如 图 4-4 所 示 。 


合 特 效果 的 链接 下 划 颖 x 


file:///0-/4/underline.htrnl 
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图 4-4 奇特 的 链接 下 划 线 效果 


当 鼠 标 悬 停 在 链接 上 或 单 击 链接 时 ,就 出 现 了 underline-hover. gif 图 像 箭头 从 左 向 右 
滚动 的 动画 效果 。 

有 时 ,我们 希望 突出 显示 某 一 个 或 某 一 类 链接 地 址 ,如 电子 邮件 的 链接 一 般 和 页 面 其 他 
链接 样式 不 一 样 ,可 以 只 为 该 链接 创建 独特 的 样式 ,这 时 候 需 要 用 到 CSS 3 中 的 属性 选择 
器 。 例 如 ,只 希望 对 “芜湖 职业 技术 学 院 ” 的 链接 产生 特殊 下 划 线 效果 ,可 以 使 用 以 下 代码 。 
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«style» 
a[href = "http://www. whit. ah. cn" ] : hover, a:visited( 
color: #666; 
text - decoration: none; 
background: url(images/underline. png) repeat - x left bottom; 
} 
</style> 


<! -一 下 面 为 body 部 分 --> 
<p><a href = "http://www. sina. com. cn"> 新 浪 网 </a></p> 
<p><a href = "http://www. whit. ah. cn"> 芜 湖 职业 技术 学 院 </a></p> 


这 时 ,“ 芜 湖 职业 技术 学 院 ” 就 具有 特殊 下 划 线 效果 ;“ 新 浪 网 ”依然 采用 默认 的 链接 样 
式 , 如 图 4-5 所 示 。 
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图 4-5 不 同类 型 链接 效果 


l4 创建 按钮 式 链接 


我 们 还 可 以 将 a 元 素 设置 成 像 按 钮 一 样 的 效果 ,让 它 的 可 点 击 区 域 更 大 。 但 是 a 元 素 
是 行内 元 素 ,我 们 需要 修改 display 属性 为 block, 并 通过 修改 width 和 height 等 属性 来 创建 
我 们 所 需要 的 样式 效果 。 

按钮 式 链接 的 代码 如 下 ,效果 如 图 4-6 所 示 。 


<style> 
af 

display: block; 
width: 6.6em; 
line- height: 1. 8em; 
text-align: center; 
text — decoration: none; 
border: solid 1px +BBOF73; 
background-color: #D5077F; 
color: #fff; 
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</style> 
<! -一下 面 为 body 部 分 --> 
<a href = "#"> 点 击 购买 </a> 


按 乌 效果 的 链接 x 
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图 4-6 按钮 式 链 接 效 果 


这 样 ,图 4-6 中 整个 红色 区 域 都 为 该 链接 的 可 点 击 范围 ,从 而 显示 了 按钮 式 链接 的 效果 。 
也 可 以 使 用 背景 图 像 为 按钮 设置 更 加 复杂 的 效果 。 图 4-7 中 的 三 个 图 像 分 别 用 于 默认 
链接 状态 .鼠标 悬 停 状态 和 激活 状态 。 


默认 时 的 红色 背景 鼠标 悬 停 时 的 蓝 色 背 景 激活 时 的 绿色 背景 
图 4-7 图 像素 材 


下 面 的 代码 可 实现 如 图 4-8 所 示 的 图 像 翻 转 效果 ,默认 时 链接 为 红色 背景 ,鼠标 悬 停 时 
为 蓝 色 背景 ,激活 时 为 绿色 背景 。 


< style type = "text/css"> 
a:link,a:visited( 
display: block; 
width: 240px; 
line- height:72px; 
text- align: center; 
text- decoration: none; 
background- image: url(images/button. png) ; 
color: # fff; 
b 
a:hover,a:focus( 
background- image: url(images/hover. png); 
} 
a:active( 
background - image: url(images/active. png); 








} 
</style> 
<! 一 下 面 为 body 部 分 --> 
<a href =" £ "> 点击 购买 </a> 
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图 4-8 翻转 图 像 的 链接 效果 


图 4-8 中 实现 了 圆 角 边框 效果 ,在 项 目 7 中 将 会 介绍 CSS 3 的 新 增 属 性 border-radius, 
该 属性 可 以 在 不 使 用 背景 图 像 的 条 件 下 设置 圆 角 边 框 。 还 可 以 结合 box-shadow 为 元 素 添 
加 阴影 。 


b 任务 实施 


下 面 介绍 利用 无 序列 表 完 成 新 闻 列表 、 导 航 栏 和 商品 图 片 列表 的 结构 。 利 用 边框 设置 
新 闻 列 表 下 边线 ,利用 背景 图 和 内 间距 的 结合 产生 列表 项 目 图 片 符号 ; 利用 浮动 产生 导航 
栏 链接 的 水 平 排列 ; 利用 背景 图 形成 链接 之 间 的 分 隔 效 果 ; 通过 对 列表 样式 的 设置 来 达到 
图 片 列表 和 图 片 标题 顺序 排列 的 效果 。 


L. 修改 链接 默认 样式 


将 页 面 中 所 有 的 链接 样式 进行 修改 ,设置 未 访问 和 已 访问 颜色 为 #36332E, 没 有 下 划 
线 , 但 是 当 鼠 标 悬 停 时 ,颜色 值 为 # BBOF73。 

(1) 设置 布局 

设置 如 图 4-9 所 示 的 布局 结构 ,下 面 为 其 HTML 框架 。 


<div class = "container"> 
<! -一 首页 头 部 -一 > 
<div class = "header - bg"> 
</div> 


<! 一 一 首页 banner -一 > 
<div class = "banner center"> 


为 了 实现 如 图 4-9 所 示 的 布局 效果 ,需要 为 它们 添加 样式 ,代码 如 下 。 
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. copycontainer( 
width: 1200px; 
) 


(2) 添加 HTML 内 容 
接 下 来 我 们 为 其 添加 具体 的 HTML 内 容 , 在 类 header-bg 中 加 入 Logo、 导 航 菜单 和 搜 
索 框 \ 按 钮 及 购物 车 ,代码 如 下 。 


<div class = "header center"> 
<div class = "logo"> 
< img src = "imgs/logo. png"> 


</div> 
<div> 
<ul> 
<li><a href =" #"># i</a></li> 
<li><a href ="#"> 新 品 速递 </a></1i> 
<li><a href = "#"> 热 卖 推荐 </a></1i> 
<li><a href =" 井 "> 商品 分 类 </a> 
<ul> 
<li><a href ="#"> 险 根 达 斯 </a></1i> 
<li><a href ="#">MSamp;M'S</a></li> 
<li><a href ="#"> 本 : 杰 瑞 </a></1i> 
<li><a href = " # "»fliEc/a»«/1i» 
</ul > 
</li> 
<li><a href ="#"> 品 牌 故事 </a></1i> 
<li><a href ="#"> 会 员 活 动 </a></1i> 
</ul> 
</div> 


<div class = "header - input" > 
< form method = "get"> 
« input type = "text" name = "search"> 
< button type = "submit" name = "search- btn" ></button> 
</form> 
<div> 
<a href = " # ">< span» &nbsp; W 9 4#</span></a> 
</div> 
</div> 
</div> 


Banner 部 分 添加 一 张 图 片 。 
< img src = "imgs/banner. png" alt = "成 为 会 员 优 惠 更 多 "> 


为 左 侧 图 片 列表 和 右 侧 广告 及 新 闻 列表 分 别 添加 如 下 内 容 。 
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<! 一 一 产品 图 片 列表 一 -> 
< div class = "product - area"> 
<ul> 
<li> 
<div class = "product - photo"> 
<a href=" # e 
< ing src = "imgs/mm. png" 
</a> 
</div> 
<div class = "product - info"> 
<div class = "name"> 
<a href = " # "> M&anp;M'S 巧克力 豆 冰激凌 </a> 
</div> 
<div class = "product - price - weight"> 
< span > Y 68 </span> 
< span >/268g </span> 
</div> 
</div> 
<div class = "product - btn"> 
<a href ="#"> 加 入 购物 车 </a> 
</div> 
</li> 
<! -一 此 处 省 略 其 他 5 个 1i 项 --> 
</ul> 
</div> 


<! -一 广告 和 新 闻 列 表 -一 > 
<div class = "ickbuy - ad - news"> 
<div class = "ickbuy - more clear"> 
<a href="#"> 
< img src = "imgs/ickbuy - more. png" alt = "更 多 精 选 商品 "> 
< span> 更 多 精 选 商品 </span> 
</a> 
</div> 
<div class = "ickbuy- ad clear"> 
<a href="#"> 
< img src = "imgs/ickbuy - ad. png" alt = "顺丰 快递 到 家 "> 
< span > 顺丰 快递 到 家 </span> 
</a> 
</div> 
<div> 
< h3 > 冰 天 美 帝 新 闻 < span ><a href =" 井 "> 更 多 </a></span></h3> 
<ul> 
<li><a href - " & "235 A ~ FEI GE MM RFE AA 3X 4 FA KR! </a></1i> 
<li><a href =" 井 "> 冰激凌 有 助 怀孕 </a></1i> 
<li><a href ="#"> 英 国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
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<li><a href ="#"> 奇 人 一 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<1i><ahref=" 井 "> 冰激凌 有 助 怀孕 </a></1i> 
<li><a href ="#"> 英 国 鼓励 市 民 吃 冰激凌 </a></1i> 
<1i><ahref=" 井 "> 吃 冰 激 凌 刺激 大 脑 快乐 区 </a></1i> 
</ul> 
</div> 
</div> 


此 时 ,实现 如 图 4-9 所 示 效 果 。 
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图 4-9 添加 HTML 内 容 后 效果 
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(3) 设置 新 闻 列 表 样 式 
在 图 4-9 中 可 以 看 到 链接 的 样式 为 蓝 色 并 有 下 划 线 ,下 面 先 来 修改 链接 样式 和 访问 过 
的 链接 样式 ,颜色 为 #36332E, 没 有 下 划 线 ,代码 如 下 。 


a,a:visited{ /* 链接 样式 和 访问 过 的 链接 样式 * / 
color: #36332E; 
text — decoration: none; 

} 


修改 链接 样式 和 访问 过 的 链接 样式 的 效果 如 图 4-10 所 示 。 
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图 4-10 修改 链接 样式 和 访问 过 的 链接 样式 后 效果 
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再 设置 当 鼠 标 悬 停 时 ,链接 颜色 值 变 成 并 BBOF73 ,代码 如 下 。 


a:hover,a:focus( 
color: # BBOF73; 
} 


至 此 ,整个 页 面 的 默认 链接 样式 就 被 修改 了 。 


l. 用 样式 区 分 不 同 链接 


修改 默认 链接 样式 后 所 有 链接 样式 统一 被 修改 了 ,但 是 ,这 里 要 求 鼠标 悬 停 在 导航 上 
时 ,该 链接 文字 颜色 还 是 灰色 值 # 36332E; 新 闻 列 表 标 题 中 的 “更 多 ”两 个 字 希 望 在 列表 右 
边 出 现 , 字 号 略 小 。 这 时 ,可 以 用 样式 区 分 不 同 的 链接 ,操作 步骤 如 下 。 

(1) 为 相应 内 容 创建 类 

当 需 要 单独 对 某 一 些 元 素 实 现 某 种 效果 时 ,可 以 为 它们 创建 一 个 类 或 ID。 在 本 例 中 ， 
为 导航 菜单 创建 类 nav, 为 “加 入 购物 车 ”创建 类 product-btn ,代码 如 下 。 


«div class-"nav" > 
«ul» 
<li><a href = "#"> 首 页 </a></1i> 
<li><a href ="#"> 新 品 速 递 </a></1i> 
<li><a href ="#"> 热 卖 推 荐 </a></1i> 
<li><a href ="#"> 商 品 分 类 </a> 
<ul> 
<li><a href ="#"> 哈 根 达 斯 </a></1i> 
<li><a href ="#">M&amp;M'S </a ></li > 
<li><a href ="#"> 本 : 杰 瑞 </a></1i> 
<li><a href ="# "^fi #</a></li> 
</ul> 
</li> 
<li><a href ="#"> 品 牌 故事 </a></1i> 
<1i><ahref="#"> 会 员 活动 </a></1i> 
</ul> 
</div> 
<! -一 此 处 省 略 其 他 代码 -一 > 
<div class = "product - btn"> 
<a href ="#"> 加 入 购物 车 </a> 
</div> 


(2) 设置 单独 的 链接 效果 

为 不 同 元 素 创建 不 同类 或 ID 名 称 可 以 单独 控制 某 个 元 素 的 样式 ,不 过 不 是 类 和 ID 名 
称 越 多 越 好 , 太 多 名 称 将 难以 阅读 和 维护 ,我 们 可 以 将 类 型 .后 代 、ID 和 类 这 几 种 选择 器 结 
合 起 来 使 用 。 

例如 ,导航 菜单 鼠标 悬 停 的 选择 器 可 以 采用 . nav ul li a:hover, 通 过 以 下 代码 即 可 实现 


@ 一 一 一 
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导航 单独 的 链接 样式 效果 。 


.nav ul li a:hover,.nav ul li a:focus{ 
color: #36332e; 
) 


修改 新 闻 列表 标题 中 “更 多 ”的 样式 ,可 以 为 span 二 标签 增加 一 个 类 或 ID ,或 者 采用 高 
级 选择 器 来 修改 样式 。 后 代 选 择 器 选择 一 个 元 素 的 所 有 后 代 , 而 子 选 择 器 只 选择 元 素 的 直 
接 后 代 , 即 子 元 素 。 代 码 如 下 。 


< h3> 冰 天 美 帝 新 闻 < span >< a href = " # "> 更 多 </a></span></h3> 
<ul> 
<! -一 此 处 为 列表 项 -一 > 
</ul> 


从 上 面 代码 中 可 以 看 到 ,span 是 h3 元 素 的 后 代 , 如 果 我 们 不 希望 选择 任意 的 h3 后 代 
span, 而 只 是 选择 h3 直接 后 代 span 元 素 ,那么 我 们 可 以 考虑 采用 子 元 素 选 择 器 h3 > span. 
样式 代码 如 下 。 


h3 > span{ 
float: right; 
font — size: 0.8em; 


} 


此 时 ,文字 * 更 多 ?就 出 现在 了 右边 ,字号 略 小 ,效果 如 图 4-1 所 示 。 


[5 创建 按钮 式 链接 


产品 图 片 列表 中 ,“ 加 入 购物 车 ” 几 个 字 具 有 按钮 式 链接 的 效果 。 其 链接 颜色 为 白色 , 背 
景 为 灰色 , 当 鼠 标 悬 停 时 产生 浅 灰色 的 背景 ,操作 步骤 如 下 。 

(1) 用 样式 设置 按钮 式 链接 区 域 大 小 

按钮 式 链接 区 域 大 小 为 258pxX40px。 文 本 信息 居中 显示 需要 用 到 text-align 属性 , 值 
center 可 以 设置 居中 的 效果 。line-height 是 行 高 属性 ,40px 的 效果 会 让 文本 垂直 位 置 居中 。 
背景 色 为 #333。 代 码 如 下 。 


. product — btn{ 
width: 258px; 
height: 40px; 
margin: 10px; 
text- align: center; 
line-height: 40px; 
background-color: #333; 
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(2) 设置 链接 样式 


整个 页 面 中 只 有 此 处 链接 颜色 为 白色 ,可 以 依据 类 product-btn 来 寻找 指定 元 素 , 代 码 
如 下 。 


. product - btn a, . product - btn a:visited{ 
color: # ffffff; 
display: block; 

} 

. product - btn a:hover, . product — btn a:focus{ 
background-color: #444444; 

} 


至 此 ,一 个 简单 的 按钮 式 链接 效果 就 完成 了 ,如 图 4-1 所 示 。 
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b 实 训 目的 

熟悉 并 掌握 链接 样式 的 制作 ,学 会 高 级 选择 器 的 应 用 。 

b 实 训 内 容 

利用 选择 器 和 链接 样式 的 基础 知识 制作 出 如 图 4-11 所 示 的 页 面 。 
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图 4-11 列表 效果 


该 列表 项 都 有 链接 ,要求 设 置 链接 颜色 为 #36332E, 鼠 标 上 其 停 时 链接 颜色 为 # BBOF73。 
其 中 ,只 要 有 指向 网 址 http://www. whit. ah. cn 的 链接 都 显示 为 红色 , 且 加 粗 。 在 一 级 列 
表 项 前 面 都 有 一 个 图 片 wdate_bg. jpg; 二 级 列表 项 前 面 是 默认 的 项 目 符号 。 
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I: 设计 思路 分 析 


首先 需要 用 链接 伪 类 修改 默认 链接 样式 。 为 了 实现 “指向 网 址 http://www. whit. ah 
.cn 的 链接 都 显示 红色 ”, 需 要 用 到 属性 选择 器 [attribute 一 value]。 在 一 级 列表 前 面 有 一 个 
图 片 , 但 是 二 级 列表 前 面 是 默认 的 项 目 符号 ,这 需要 子 选 择 器 来 选择 相应 的 元 素 。 


12. HTML 代码 


HTML 代码 如 下 。 


<ul class = "nav"> 
<li><a href = "http://www. whit. ah. cn"» Ñ Ji «/a ></li > 
<li><a href ="#"> 新 品 速 递 </a></1i> 
<li><a href ="#"> 热 卖 推荐 </a></1i> 
<1i><a href ="#"> 商 品 分 类 </a> 
<ul> 
<li><a href ="#"> 险 根 达 斯 </a></1i> 
<li><a href ="#">M&amp;M'S</a></li> 
<li><a href ="#"> 本 . 杰 瑞 </a></1i> 
<li><a href = "#"> 德 甘 </a></1i> 
</ul> 
</1i> 
<li><a href ="#"> 品 牌 故 事 </a></1i> 
<li><a href ="#"> 会 员 活动 </a></1i> 


</ul> 


1:. 设置 样式 


设置 链接 样式 的 代码 如 下 。 


a,a:visited{ /* 设置 未 访问 和 访问 过 链接 的 样式 * / 
color: #36332e; 
text — decoration: none; 


) 

a:hover, a:focus{ /* 设 置 鼠标 悬 停 链 接 的 样式 * / 
color: # BBOF73; 

) 


a[href = "http://www. whit.ah.cn"] ( /* 设置 特定 链接 地 址 的 样式 * / 
color: red ; 
font — weight: bold; 
} 
.nav» li { /* 设置 一 级 菜单 图 片 项 目 符号 的 样式 * / 








list- style- type: none; 

padding- left: 25px; 

background — image: url(imgs/wdate_bg. jpg); 
background - repeat: no- repeat; 
background- position: left top; 


项 目 总 结 


链接 是 页 面 中 最 基础 的 元 素 , 链 接 样 式 的 修改 是 我 们 学 习 网 页 制作 的 必 备 知识 。 本 项 
目 介绍 了 不 同 链接 类 型 样式 的 设置 ,介绍 了 背景 的 属性 ,利用 背景 可 以 为 链接 设置 不 一 样 的 
样式 效果 ,最 后 介绍 了 将 链接 像 按 钮 一 样 显示 的 方法 。 


课 后 练习 


1. 已 有 如 下 的 HTML 代码 ,需要 修改 链接 样式 。 要 求 链接 文字 没有 下 划 线 ,未 访问 和 
已 访问 链接 的 颜色 值 为 #36332E, 鼠标 悬 停 时 的 颜色 值 为 #fBBOF73, 其 中 将 中 包含 title 
属性 值 为 hot 的 文字 加 粗 , 显 示 效 果 如 图 4-12 所 示 。 





图 4-12 不 同 链接 样式 效果 


<ul class= "nav"> 

<li title- "hot"»« a href = "http://www. whit.ah.cn"> 首 页 </a></1i> 

<li title = "nothot"><a href = " # ">$f th BB</a></li> 

<li title= "hot"><a href ="#"> 热 卖 推 荐 </a></1i> 

<li title = "nothot"><a href =" 井 "> 商品 分 类 </a> 

<ul> 

<li title= "not hot"><a href ="+ ">I HA Mi</a></li> 
<li title = "nothot"»« a href = " # "> M&amp;M'S </a ></li > 
<li title= "nothot"><a href ="#"> 本 杰 瑞 </a></1i> 
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<li title = "nothot"><a href = " # ">##¥</a></li> 
</ul> 
</li> 
<li title = "nothot"><a href =" 井 "> 品牌 故事 </a></1i> 
<li title= "nothot"><a href =" 井 "> 会 员 活动 </a></1i> 
</ul> 


2. 利用 素材 包 中 的 btn. png, 制 作出 如 图 4-13 所 示 的 按钮 式 链接 效果 。 


练习 是 2 x 
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图 4-13 ”按钮 式 链接 效果 





”设置 网 页 导航 条 和 列表 样式 














| 知识 目标 | 

。 了 解 列表 的 常用 制作 方法 。 

t 了解 列表 的 样式 类 型 。 

。 了解 边框 的 样式 。 

t 理解 背景 的 设置 方法 。 

| 技能 目标 | 

。 掌握 列表 项 目 符号 的 设置 方法 。 
”掌握 背景 颜色 和 图 片 的 使 用 技巧 。 
。 能够 利用 边 距 调整 元 素 的 位 置 。 
”能 够 利用 边框 设置 分 隔 线 效果 。 
。 能 够 对 元 素 合理 设置 浮动 效果 。 
。 掌握 新 闻 列 表 、 导 航 和 图 片 列表 的 制作 方法 。 
| 素养 目标 | 

。 掌 握 常用 列表 的 制作 思路 。 

。 探索 一 种 效果 的 多 种 实现 方法 。 


任务 ”制作 导航 条 和 列表 


> 学 习 情境 


小 黄 在 前 面 的 项 目 中 完成 了 首页 的 布局 和 链接 样式 的 修改 ,下 面 要 通过 列表 来 制作 导 
航 条 和 新 闻 列 表 。 


b 任务 描述 


在 首页 中 ,新闻 列表 垂直 排列 ,新闻 标 题 与 新 闻 列表 之 间 有 一 条 分 隔 线 ; 导航 条 水 平 排 
列 , 并 且 鼠 标 悬 停 后 出 现 二 级 菜单 ; 产品 图 片 列表 三 列 显示 。 最 终 效 果 如 图 5-1 中 黑 框 区 域 
所 示 。 

本 任务 主要 内 容 如 下 。 

(1) 制作 新 闻 列表 。 

(2) 制作 导航 条 。 

(3) 制作 产品 图 片 列表 。 

问题 引导 : 

COD 列表 默认 的 项 目 符号 如 何 去 掉 ? 有 哪些 列表 样式 类 型 ? 

(2) 新 闻 标 题 和 新 闻 列 表 之 间 的 分 隔 线 是 如 何 添加 的 ? 

(3) 怎样 让 列表 水 平 排列 ? 

(4) 如 何 让 二 级 菜单 隐藏 ,鼠标 悬 停 就 出 现 ? 
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图 5-1 列表 效果 


> 任务 知识 


HTML 列表 在 网 页 中 是 非常 常见 的 元 素 之 一 ,很 多 内 容 都 可 以 认为 是 列表 ,如 导航 菜 
单 、 产 品 图 片 . 新 闻 等 。 我 们 可 以 修改 其 CSS 样式 来 让 它们 显示 出 不 同 的 外 观 效果 。 


Ji. 列表 样式 类 型 属性 


列表 的 属性 list-style-type, 即 列表 样式 类 型 ,有 多 种 值 可 选 , 常 见 的 如 none, disc, circle 
等 。 表 5-1 为 常见 列表 样式 值 及 其 含义 。 


表 5-1 常见 列表 样式 值 及 其 含义 



































Fox od ae X 
none 无 列表 项 标记 
disc 默认 值 , 黑 圆 点 
circle 空心 圆 
square 小 黑 方块 
decimal 阿拉 伯 数 字 排 序 1,2,3,4,… 
decimal-leading-zero 阿拉 伯 数 字 (十 进 制 数 前 置 零 ) 
lower-roman 小 写 罗马 数字 排序 
upper-roman 大 写 罗 马 数字 排序 
lower-alpha 小 写字 母 排序 
upper-alpha 大 写字 母 排序 
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列表 样式 值 还 有 lower-greek , lower-latin, upper-latin, hebrew, armenian, georgian 等 。 


假设 有 一 个 任务 列表 ,代码 如 下 。 


<ul id= "decimal"> 
<1i> Coffee </1i> 
<1i>Tea</li> 
<1i> Water </li> 
<1i> Soda </1i> 
</ul> 


为 了 实现 该 列表 以 数字 1 开始 排序 ,我 们 只 须 将 列表 项 的 list-style-type 值 设置 为 


decimal, 


# decimal li { 
list- style- type: decimal; 
) 


产生 的 列表 样式 效果 如 图 5-2 所 示 。 


12. 列表 样式 位 置 属性 


列表 样式 位 置 属 性 , 即 list-style-position. ,可 以 选择 的 值 主 要 
有 outside (以 列表 项 内 容 为 准 对 齐 ) 和 inside (以 列表 项 标记 为 准 
对 齐 ) 。 

假设 有 如 下 代码 所 示 任 务 列表 。 


<p> 该 列表 的 list — style- position 的 值 是 inside </p> 
<ul class = "inside"> 

«li» Coffee </1i> 

<li>Tea</li> 

<li>Water </li> 

<li> Soda </li> 
</ul> 
<p> 该 列表 的 list- style- position 的 值 是 outside </p> 
<ul class= "outside"> 

<1i>Coffee</li> 

<li>Tea</li> 

<li> Water </li> 

«li» Soda </1i> 
</ul> 





图 5-2 以 数字 1 开始 排 
序 的 列表 效果 


我 们 为 类 inside 和 outside 的 list-style-position 属性 分 别 设 置 为 inside 和 outside. 


.inside { 
list- style- position: inside; 


D o samasse 





list- style- type: decimal; 

} 

. outside { 
list- style- position: outside; 
list- style- type:decimal; 

} 


最 终 效 果 如 图 5-3 所 示 。 


E 列表 样式 图 片 属性 


list-style-image 即 列表 样式 图 片 ,该 属性 可 以 将 定制 的 图 片 设置 为 项 目 符号 。 
假设 有 如 下 代码 所 示 的 任务 列表 。 


<ul id= "listimg"> 
<1i>Coffee</li> 
<1i> Tea </1i> 
<1i> Water </li> 
«li» Soda </1i> 
</ul> 


我 们 用 图 5-4 所 示 的 图 片 作 为 列表 的 项 目 符号 。 


(2A list-style-position 的 从 是 inside 





1. Coffee 
2. Tea 

3. Water 
4. Soda 


WAIN list-style-position 的 值 是 outside 
1. Coffee 
2. Tea 


3. Water 
4. Soda 











图 5-3 列表 样式 位 置 为 inside 和 outside 列表 效果 图 5-4 项 目 符号 图 片 
设置 listimg 的 list-style-image 属性 值 指向 该 图 片 ,代码 如 下 。 
# listimg li ( 


list- style- image: url(img/5 — 4. png) ; 
} 


最 终 样 式 效果 如 图 5-5 所 示 。 
不 过 这 种 方法 对 图 像 位 置 的 控制 力 不 是 很 好 .比较 常用 的 方法 是 关闭 项 目 符号 ,将 定制 
的 项 目 符号 图 片 作为 背景 出 现 ,并 且 设置 背景 图 像 的 位 置 来 达到 需要 的 效果 ,代码 如 下 。 


—® 





# listing { 
list- style- type: none; 

} 

# listing li { 
background - image: url(img/5 — 4. png); 
background - repeat: no- repeat; 
background - position: 0px center; 
padding- left: 50px; 

) 


效果 如 图 5-6 所 示 。 
Coffee 








图 5-5 列表 样式 图 片 效果 


l^ 列表 样式 属性 


nes WE [d 


/* 先 去 掉 默 认 项 目 符号 * / 


/* 设置 背景 图 片 为 定制 的 符号 * / 

/* 背景 图 片 不 重复 */ 

/* 背景 图 片 的 位 置 为 Xx: 0; Y:center * / 
/* 左 外 边 距 控制 列表 缩 进 * / 





图 5-6 用 背景 图 像 实 现 自 定 义 项 目 列表 


list-style 即 列 表 样 式 。 这 个 属性 是 设 定 列 表 样式 的 一 个 快捷 的 综合 写法 。 用 这 个 属性 
可 以 同时 设置 列表 样式 类 型 属性 (list-style-type) ,列表 样式 位 置 属性 (list-style-position) 和 


列表 样式 图 片 属性 (list-style-image) ,示例 代码 如 下 。 


#1istimg{list— style:circle inside url(img/5 - 4.png)] 


5. 边框 


(1) border-style 


border-style 即 边框 风格 属性 ,用 来 设 定 上 、 下 、 左 、 右 边框 的 风格 , 它 的 值 如 表 5-2 所 示 。 
表 5-2 边框 风格 属性 值 及 其 含义 


























属 性 值 tee 
none 没有 边框 ,无 论 边框 宽度 设 为 多 大 
dotted 点 线 式 边框 
dashed 破 折线 式 边框 
solid 直线 式 边框 
double 双 线 式 边框 
groove 模 线 式 边 框 
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续 表 
属 性 值 CEA 
ridge JXHARGXnE 
inset VJ ECSCR B fie 
outset 突起 效果 的 边框 





(2) border-width 
border-width 即 边框 宽度 属性 ,用 来 设 定 上 、 下 、 左 、 右 边框 的 宽度 , 它 的 值 如 表 5-3 

















所 示 。 
表 5-3 边框 宽度 属性 值 及 其 含义 
属性 值 "o 
medium | 默认 值 , 中 等 的 边框 
thin 细 边 框 
thick 粗 边 框 
length 自 定义 边框 ,可 以 用 绝对 长 度 单位 (cm、mmoin、pt、pc) 或 者 用 相对 长 度 单位 (em、ex、px) 


图 5-7、 图 5-8 和 图 5-9 分 别 为 将 边框 设置 为 medium, thin 和 thick 后 的 效果 。 
也 可 以 为 border-width 设置 具体 的 值 ,代码 如 下 。 


# border{ 
border - style: solid; 
border - width: 5px; /* 边框 为 5 个 像素 宽 * / 























这 里 是 细 边 框 效果 
这 里 是 中 等 边框 效 
图 5-7 border-width 值 为 图 5-8 border-width 值 图 5-9 border-width 值 
medium 为 thin 为 thick 


(3) border-color 


border-color 即 边框 颜色 属性 ,用 来 设 定 上 、 下 、 左 、 右 边框 的 颜色 ,示例 代码 如 下 。 
<div id= "medium"> 这 里 是 中 等 边框 效果 </div> 


我 们 为 该 DIV 设置 红色 边框 .代码 如 下 。 








# border{ 
border - style: solid; 
border - width: 5px; 
border - color: # F00; 
} 


(4) border 
border 即 边框 属性 。 这 个 属性 是 边框 属性 的 一 个 快捷 的 综合 写法 , 它 包 含 border- 
width, border-style 和 border-color ,示例 代码 如 下 。 


# border{ 
border: solid 5px # F00; 
} 


(5) 单 边 边框 属性 

上 、\ 下 ,左右 四 个 边框 不 但 可 以 统一 设 定 ,也 可 以 分 开设 定 。 

设 定 上 边框 属性 ,可 以 使 用 border-top、border-top-width、border-top-style 和 border- 
top-color。 

设 定 下 边框 属性 ,可 以 使 用 border-bottom, border-bottom-width, border-bottom-style 
和 border-bottom-color。 

设 定 左边 框 属性 ,可 以 使 用 border-left, border-left-width, border-left-style 和 border- 
left-color。 

设 定 右 边框 属性 , 可 以 使 用 border-right, border-right-width, border-right-style 和 
border-right-color。 


示例 代码 如 下 。 


# border{ 
border - bottom - width: 5px; 
border - bottom- style: solid; 
border- bottom- color: # F00; 
height: 300px; / * 设置 border 元 素 高 300px * / 
width: 300px; / * 设置 border 元 素 宽 300px * / 
) 


最 终 效 果 如 图 5-10 所 示 。 


Le: position 


position 属性 定义 元 素 布 局 所 用 的 定位 机 制 。 任 何 元 素 都 可 
以 定位 ,不 过 绝对 或 固定 元 素 会 生成 一 个 块 级 框 , 而 不 论 该 元 素 
本 身 是 什么 类 型 。 相 对 定位 元 素 会 相对 于 它 在 正常 流 中 的 默认 
位 置 偏 移 。 它 的 值 有 absolute, fixed, relative, static 和 inherit, 图 5-10 只 有 下 边框 效果 


O= 





EX emnes 





K 5-4 是 position 属性 的 值 及 其 含义 。 
55-4 position 属性 的 值 及 其 含义 


属性 值 * X 
生成 绝对 定位 的 元 素 ,相对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 。 元 素 的 位 置 通过 











shenlate left top right 以 及 bottom 属性 进行 规定 
fixed 生成 绝对 定位 的 元 素 , 相 对 于 浏览 器 窗口 进行 定位 。 元 素 的 位 置 通过 left, top, right 以 及 
bottom 属性 进行 规定 
生成 相对 定位 的 元 素 , 相 对 于 其 正常 位 置 进行 定位 ,因此 ,left: 20 会 向 元 素 的 左边 添加 
relative 20 像素 





static 默认 值 。 没 有 定位 ,元 素 出 现在 正常 的 流 中 (忽略 top, bottom, left right 或 者 z-index 声明 ) 
inherit 规定 应 该 从 父 元 素 继承 position 属性 的 值 








下 面 的 代码 实现 图 像 的 左边 缘 位 于 包含 它 的 元 素 左 边缘 向 右 300 像素 。 


img{ 
position: absolute; 
left :300px; 

} 


left 属性 规定 元 素 的 左边 缘 。 该 属性 定义 了 定位 元 素 左 外 边 距 边界 与 其 包含 块 左边 界 
之 间 的 偏 移 。 不 过 ,如 果 position 属性 的 值 为 static, 那 么 设置 left 属性 不 会 产生 任何 效果 。 


> 任务 实施 
本 任务 中 ,小 黄 利用 无 序列 表 完 成 新 闻 列表 的 制作 ,取消 列表 的 项 目 符号 ,利用 边框 设 


置 列表 标题 和 新 闻 列 表 的 分 割 线 。 利 用 浮动 产生 导航 栏 链接 的 水 平 排列 通过 对 列表 样式 
的 设置 来 达到 图 片 列表 和 图 片 标题 顺序 排列 的 效果 。 


Ii. 制作 新 闻 列 表 


该 新 闻 列 表 有 一 个 标题 ,在 标题 和 新 闻 列表 之 间 有 一 个 分 割 线 ,如 图 5-1 所 示 , 需 要 设 
置 单 边 边 框 , 每 一 个 新 闻 列 表 前 面 没有 项 目 符号 ,具体 操作 步 又 如 下 。 

(1) 添加 新 闻 列 表 的 内 容 

我 们 用 无 序列 表 来 制作 新 闻 列 表 ,标题 设 为 “ 冰 天 美 帝 新 闻 ”, 用 h3 标签 表示 标题 ,代码 
如 下 。 


<h3> 冰 天美 帝 新 闻 </h3 > 

<ul> 
<1i><ahref="#"> 奇 人 一 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<li><a href =" 井 "> 冰激凌 有 助 怀 孕 </a></1i> 
<li><a href="#"> 英 国 鼓励 市 民 吃 冰激凌 </a></1i> 
<1i><ahref=" 井 "> 吃 冰 激 凌 刺激 大 脑 快乐 区 </a></1i> 
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<li><a href ="#"> 奇 人 ~ 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<li><a href =" 井 "> 冰激凌 有 助 怀孕 </a></1i> 
<li><a href =" & "> 英国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
</ul> 


添加 内 容 后 的 新 闻 列 表 效果 如 图 5-11 所 示 。 
(2) 边 距 清 零 
将 元 素 的 外 边 距 和 内 边 距 清 零 ,代码 如 下 ,产生 的 样式 如 图 5-12 所 示 。 


*{ /xx 代表 所 有 的 标签 或 元 素 , 它 是 通配符 选择 器 * / 

































































水 天 美 帝 新 闻 
. E 奇人 ~ 伊拉克 男 家 竟然 这 么 用 冰激凌 ! 
。 冰 激 读 有 助 怀 KARR ABITA 
。 英国 鼓励 市 Paes 英国 鼓励 市 民 吃 冰 激 污 
。 吃 订 激 潜 刺 激 大 脑 快乐 区 DERSLER A Rr AUR UE 
* SA Pir re wR PAIR 2. Foo | SpA Pre AT PAR A. Roa | 
* aE B En PEE BENT 
。 RET RSs 英国 鼓励 市 民 吃 冰激凌 
。 吃 冰激凌 刺激 大 脑 快乐 区 DEBE RA Rt RE 
图 5-11 添加 内 容 后 的 新 闻 列 表 效果 Hi5-12. 边 距 清 零 后 的 效果 


(3) 修改 body 和 链接 样式 
设置 body 元 素 字 体 、 大 小 、 颜 色 和 背景 色 , 并 且 设 置 a 元 素 的 链接 样式 .已 访问 链接 的 
样式 ,代码 如 下 。 


body { 
font- family: "微软 雅 黑 "; 
font- size: 14px; 
color: #36332e; 
background-color: &f4f4f4; 
} 
a,a:visited{ 
color: #36332e; 
text — decoration: none; 
} 


(4) 修饰 新 闻 列表 
还 需要 取消 列表 默认 的 项 目 符号 ,设置 标题 和 新 闻 之 间 的 分 隔 线 。 为 了 增强 交互 性 ,再 


(ii 
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设置 鼠标 悬 停 在 链接 上 颜色 为 #fBBOF73 ,代码 如 下 。 


a:hover{ 

color: # BBOF73; /* 鼠标 悬 停 时 链接 颜色 为 #BBOF73# / 
ul { 

list-style- type: none; /* 去掉 项 目 符号 * / 

margin: 10px 0px 10px Opx; / * 上 下 外 边 距 为 10px, 左右 外 边 距 为 0*/ 
} 
h3{ 

border - bottom - style: solid; 

border - bottom - width: 2px; 

border - bottom- color: #c4c4c4; 

padding - bottom: 5px; /* 下 内 边 距 为 5px, 使 新 闻 标题 和 分 隔 线 之 间 有 一 定 的 距离 * / 
} 


产生 的 列表 样式 如 图 5-13 所 示 。 





BA PARAR AAAA ! 
冰 激 读 有 助 怀孕 

SERE) FMEA 

Re RR aR RE 


育 人 ~ 伊拉克 画家 竟然 这 么 用 冰 激 读 ! 





图 5-13 设置 鼠标 悬 停 链接 颜色 后 的 效果 


(5) 添加 “更 多 ” 
根据 图 5-1 所 示 的 效果 ,我们 还 需要 添加 新 闻 页 面 链接 文字 “更 多 "。 文 字 “ 更 多 ”和 新 
闻 标 题 在 同一 行 ,但 是 居 右 显示 ,可 以 将 其 放 入 span 元 素 内 部 ,代码 如 下 。 


< h3> 冰 天 美 帝 新 闻 < span class = "more"><a href =" 井 "> 更 多 </a></span></h3 > 
<ul> 
<li><a href ="#"> 奇 人 一 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<li><a href = "#"> 冰 激 凌 有 助 怀孕 </a></1i> 
<li><a href =" # "> 英国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
<li><a href="#"> 奇 人 一 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<li><a href ="#"> 冰 激 凌 有 助 怀孕 </a></1i> 
<li><a href = "#"> 英 国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href = "#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
</ul> 
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设置 该 span 元 素 右 浮动 即 可 控制 该 元 素 居 右 显示 ,代码 如 下 。 


.more af 
float: right; 
font- size: 12px; 
line- height: 24px; 
} 


最 终 的 新 闻 列 表 样 式 如 图 5-14 所 示 。 





天 美 帝 新 闻 更 多 
人 -~ 伊拉克 画家 竟然 这 么 用 冰 激 读 ! 


RGR PUB Bart 

A~ Bi aisi Pc I BARR ! 
订 激 痰 有 助 怀孕 

SITS PMS vk 

亲 激 痰 刺激 大 脑 快乐 区 








图 5-14 最 终 的 新 闻 列表 样式 


12. 创建 导航 条 


该 导航 条 需要 水 平 排列 ; 二 级 菜单 隐藏 ， 当 鼠 标 悬 停 在 导航 条 上 时 ,一 级 菜单 出 线 下 划 
线 , 并 且 相 应 二 级 菜单 显示 ,效果 如 图 5-15 所 示 。 实 现 该 效果 的 具体 操作 步骤 如 下 。 











图 5-15 导航 条 效果 


(1) 添加 导航 条 的 内 容 
用 无 序列 表 创 建 导 航 条 的 一 级 菜单 和 二 级 菜单 ,代码 如 下 。 
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<div class = "nav"> 
<ul> [* 一 级 菜单 * / 
<li><a href = " # ">Ñ W§</a></li> 
<li><a href = "#"> 新 品 速递 </a></1i> 
<li><a href = "#"> 热 卖 推荐 </a></1i> 
<li><a href ="#"> 商 品 分 类 </a> 
<ul> /* 二 级 菜单 */ 
<li><a href ="#"> 险 根 达 斯 </a></1i> 
<li><a href ="#">M&amp;M'S</a></li> 
<li><a href =" # "%4 - 7 Hi</a></li> 
<li><a href ="#">#8#</a></li> 
</ul> 
</li> 
<li><a href ="#"> 4h PMB </a></li> 
<li><a href="+">2 fiif zljc/a»«/li» 
</ul> 
</div> 


(2) 修改 边 距 和 链接 样式 
同样 ,需要 将 边 距 清 零 ,还 要 修改 链接 字体 、 大 小 和 颜色 ,代码 如 下 。 


* { /* 边 距 清 零 * / 
margin: Opx; 
padding: Opx; 
} 
body{ /* 设置 字体 大 小 和 颜色 * / 


font- family: "MAKER"; 
font- size: 14px; 
color: #36332e; 
} 
a,a:visited{ /* 设置 链接 样式 和 已 访问 链接 的 样式 * / 
color: #36332e; 
text — decoration: none; 


(3) 修饰 导航 栏 
此 时 ,默认 的 项 目 符号 还 没有 去 掉 , 需 要 取消 项 目 符号 ,并 且 用 float 属性 设置 导航 栏 水 


平 排列 ,代码 如 下 。 
.nav ul ( /* 去 掉 项 目 符号 */ 
list- style- type: none; 
) 
.nav ul li { 
float: left; /* 导航 栏 一 级 菜单 水 平 排列 * / 
} 


—© 












此 时 ,样式 效果 如 图 5-16 所 示 。 
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为 了 让 导航 菜单 清晰 美观 ,可 以 设置 i 之 间 有 一 定 的 空 阶 。 为 了 体现 交互 性 ,设置 鼠标 
悬 停 一 级 菜单 时 有 下 划 线 ,鼠标 悬 停 在 二 级 菜单 时 没有 下 划 线 。 在 这 里 ,用 border-bottom 
属性 设置 下 划 线 , 代 码 如 下 。 


.nav ul li { 


line- height: 40px; /* 设 置 导航 栏 行 高 40px * / 
padding: 10px 20px; /* 导航 栏 的 上 、 下 内 间距 为 10px, 左 、 右 间距 为 20px * / 
float: left; 

} 

.nav ul li a:hover{ /* 鼠标 悬 停 在 一 级 菜单 时 出 现下 划 线 * / 


padding - bottom: 6px; 
border - bottom— style: solid; 
border - bottom - width: 2px; 
border - bottom- color: # 4D4945; 
) 
.nav ul li:hover ul li a:hover( 
border - bottom:none; /* 鼠标 悬 停 在 二 级 菜单 不 显示 下 划 线 * / 


} 


(4) 设置 导航 栏 二 级 菜单 
可 以 利用 left 属性 和 position: absolute 结合 使 用 控制 二 级 菜单 的 位 置 ,出现 隐 藏 或 显 


示 的 效果 ,代码 如 下 。 


.nav ul li ul( 
width: 10em; /* 设 置 导航 栏 二 级 菜单 宽 为 10em*/ 
position: absolute; 
left: — 999em; /* 隐藏 二 级 菜单 * / 
} 
.nav ul li:hover ul{ /* 当 鼠 标 悬 停 在 一 级 菜单 上 时 二 级 菜单 显示 * / 
left: auto; 


} 


列表 样式 如 图 5-17 所 示 。 
(5) 修饰 二 级 菜单 
此 时 二 级 菜单 还 保留 了 padding: 10px 20px 的 样式 ,需要 修改 该 样式 ,代码 如 下 。 


.nav ul li:hover ul li( 
padding: 0 0.2em; / * 二 级 菜单 有 Spx 的 内 间距 * / 


} 
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图 5-17 ”鼠标 悬 停 时 出 现 二 级 菜单 
图 5-18 所 示 为 修改 内 间距 后 的 效果 。 
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图 5-18 修改 二 级 菜单 内 间距 后 的 样式 


通过 图 5-18 发 现 列表 项 不 是 期 望 的 垂直 排列 ,此 时 需要 利用 float: none 来 清除 浮动 ， 
代码 如 下 。 


.nav ul li:hover ul li{ 
float:none; 
padding:5px; 
padding: 0 0.2em; 

) 


/* 让 二 级 菜单 垂直 显示 * / 


再 来 设置 背景 色 为 并 4D4945, 利 用 display: block 为 二 级 菜单 创建 按钮 式 链接 样式 , 代 
码 如 下 。 


.nav ul li:hover ulli ,.nav ul li:hover ul li a( 
display: block; 
padding:0 0.2em; 
line- height: 30px; 
width: 9.6em; 


ORES ELS [cd 





color: # fff; 
background-color: #4D4945; 
} 


当 鼠 标 悬 停 在 商品 分 类 上 时 , 即 出 现 如 图 5-19 所 示 效 果 。 
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图 5-19 为 二 级 菜单 设置 背景 色 并 创建 按钮 式 链接 后 的 样式 
接 下 来 设置 当 鼠 标 悬 停 在 二 级 菜单 上 时 ,背景 色 改变 ,代码 如 下 。 
.nav ul li:hover ul li a:hover( 
background-color: #404040; 


} 


当 鼠 标 悬 停 在 “本 。 杰 瑞 ” 上 时 ,样式 如 图 5-20 所 示 。 
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图 5-20 二 级 菜单 鼠标 悬 停 效 果 


(6) 二 级 菜单 堆 释 置顶 

为 了 防止 导航 条 下 面 的 元 素 遮 住 二 级 菜单 的 显示 ,可 以 利用 z-index: 9999 将 二 级 菜单 
BWM., z-index 属性 设置 元 素 的 堆 倒 顺序 。 拥 有 更 高 堆 番 顺序 的 元 素 总 是 会 处 于 堆 番 顺序 
较 低 的 元 素 的 前 面 。 


.nav ul li:hover ul{ 
left: auto; 


导航 条 部 分 完整 的 样式 代码 如 下 。 











width: 9.6em; 
color: # fff; 
background-color: #4D4945; 

} 

.nav ul li:hover ul li a:hover{ 
border — bottom: none; 
background — color: # 404040; 

} 

.nav ul li:hover ul( 
left: auto; 

z- index: 9999; 

} 


至 此 ,导航 条 部 分 就 创建 好 了 。 


[5 制作 产品 图 片 列 表 


产品 图 片 列表 同样 采用 无 序列 表 制 作 , 该 列表 项 中 包含 图 片 、 产 品 信息 和 “加 入 购物 车 ” 
按钮 ,样式 如 图 5-21 所 示 。 制 作 产 品 图 片 列表 的 操作 步骤 如 下 。 
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图 5-21 产品 图 片 列表 效果 
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(1) 添加 产品 图 片 列表 的 内 容 

还 是 采用 无 序列 表 方式 制作 ,每 个 列表 项 中 有 三 项 内 容 : 产品 图 片 、 产 品 信息 (产品 信 
息 包含 产品 标题 和 产品 价格 及 克 数 ) 和 “加 入 购物 车 ”按钮 ,分 别 用 类 . product-photo, 
. product-info 和 . product-btn 来 表示 .代码 如 下 。 


<div class = "product - area"> 


<ul> 
<li> 1 一 个 产品 列表 项 * / 
< div class = "product - photo"> /* th * / 
<a href = " # ">< ing src = "imgs/mm. png"></a> 
</div> 
<div class = "product - info"> /x* 产品 信息 */ 
<a href = " # "> M&amp;M'S 巧克力 豆 冰 激 凌 </a> 
<div class = "product - price — weight"> 
< span > Y 68/268g </span> 
</div> 
</div> 
< div class = "product - btn"> /x*“ 加 入 购物 车 ”按钮 */ 
<a href ="#"> 加 入 购物 车 </a> 
</div> 
</li> 
/* 此 处 省 略 4 个 产品 列表 项 * / 
<li> 


<div class = "product - photo"> 
<a href = " # ">< ing src = "img/bjr. png"></a> 

</div> 

<div class = "product - info"> 
<a href =" # "> 本 . 杰 瑞 草莓 冰激凌 </a> 
<div class = "product - price - weight"> 

< span» Y 74/420g </span> 

</div> 

</div> 

<div class = "product - btn"> 
<a href - " £ JW AWW ¥</a> 

</div> 

</li> 
</ul> 
</div> 


实现 的 样式 如 图 5-22 所 示 。 
(2) 修改 边 距 、 链 接 和 浮动 样式 
将 元 素 边 距 设置 为 0; 设置 页 面 背景 色 , 文 本 字体 、 颜 色 、 大 小 ,链接 样式 ; 设置 整个 产 























图 5-22 添加 内 容 后 的 产品 图 片 列表 效果 
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品 图 片 列表 的 宽度 为 894px; 为 了 让 列表 之 间 有 一 定 的 距离 ,设置 每 个 列表 项 右 外 边 距 为 
20px, 每 个 列表 项 的 宽度 为 278px。 修 改 样式 代码 如 下 。 


*( /* 边 距 清 零 */ 
margin: Opx; 
padding: Opx; 
} 
body{ /* 设置 字体 、 大 小 、 颜 色 和 背景 色 */ 


font- family: "微软 雅 黑 "; 
font- size: 14px; 
color: #36332e; 
background-color: &f4f4f4; 
} 
a,a:visited{ /* 设置 链接 样式 .已 访问 链接 的 样式 * / 
color: #36332e; 
text — decoration: none; 
} 
. product — area{ 
width: 894px; /* 整个 产品 图 片 列表 的 宽度 */ 
} 
.product 一 area ul{ 
list- style- type: none; /* 取 消 默认 的 项 目 符号 / 
) 
.product - area ul li( 


float: left; 1 使 列表 项 水 平分 布 * / 
background-color: # ffffff; /* 列表 项 内 部 背景 色 * / 
width: 278px; /* 每 个 列表 项 的 宽度 * / 
margin:20px 20px Opx Opx; /* 设 置 上 、 右 外 边 距 为 20pxx / 


} 


样式 效果 如 图 5-23 所 示 。 
如 果 用 TE 浏览 器 打开 ,图 片 四 周 会 出 现 黑色 边框 ,可 以 利用 border: none 来 取消 图 片 
的 边框 ,代码 如 下 。 


border :none; 


(3) 修饰 列表 样式 

每 个 列表 项 的 宽度 为 278px, 为 了 使 内 部 元 素 与 边界 有 一 定 的 间隙 ,设置 列表 项 内 部 元 
素 10px 的 外 边 距 ,内 部 元 素 宽 度 则 为 258px。 为 了 防止 元 素 过 大 超出 边界 ,可 以 用 
overflow: hidden 将 多 出 部 分 隐藏 。 
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图 5-23 修改 边 距 .链接 和 浮动 样式 后 的 效果 


. product — photo, . product — info, . product — btn( 
width: 258px; 
margin: 10px; 
overflow: hidden; 


接 下 来 设置 “加 入 购物 车 ”样式 。display:block 可 以 实现 一 定 区 块 的 链接 方式 ,text- 
align: center 实现 文本 居中 对 齐 , 当 鼠标 悬浮 时 修改 背景 色 。 


. product — btn a{ 
background-color: #333333; 
width: 258px; 
height: 40px; 
text- align: center; 

line- height: 40px; 
color: + ffffff; 
display: block; 


/* 实现 “加 入 购物 车 ”按钮 居中 显示 * / 
/* 设置 行 高 为 40px 实现 垂直 位 置 居中 */ 


} 
. product — btn a:hover{ 
background-color: #444444; 


再 将 价钱 和 克 数 的 字号 略微 调 小 。 


此 时 ,就 会 看 到 如 图 5-21 所 示 的 效果 。 
制作 产品 图 片 列表 部 分 完整 样式 代码 如 下 。 
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text- align: center; 
line- height: 40px; 
color: #ffffff; 
display: block; 

) 

. product - btn a: hover( 
background-color: & 444444; 

) 

. product - price - weight{ 
font- size: 12px; 

) 


至 此 ,产品 图 片 列表 就 制作 完成 了 。 


Lill 创建 垂直 导航 条 














> 实 训 目 的 an 

图 书 

熟悉 并 掌握 使 用 列表 制作 导航 条 的 方法 ,掌握 浮动 .背景 的 设置 ea 

技巧 。 数码 

服装 

b 实 训 内 容 = 
利用 前 面 介 绍 的 技术 和 方法 ,制作 出 如 图 5-24 的 效果 。 me Pasig 


> 实 训 步 又 


L. 设计 思路 分 析 


利用 无 序列 表 制 作 垂直 导航 条 ,该 导航 条 有 浅 灰色 的 背景 和 灰色 的 边框 ,菜单 按钮 上 的 
刻 线 效果 采用 上 边框 白色 、 下 边框 灰色 。 


12. HTML 代码 


HTML 代码 如 下 。 


<ul class= "nav"> 
<li><a href ="#">H Ji«/a»«/li» 
<li><a href = " # "> 4i</a></li> 
<li><a href =" # "> Hi</a></li> 
<li><a href ="#">%f§</a></li> 
<li><a href ="#"> 服 装 </a></1i> 
<li><a href ="#"> 家 居 </a></1i> 

</ul> 








E 设置 导航 区 块 nav 的 效果 
设置 导航 区 块 nav 的 代码 如 下 。 





*( /* XB / 
padding:0; 
margin:0; 
) 
-nav { 
list- style- type: none; /* 取消 项 目 符号 */ 
border: 1px solid #CCC; /* 设置 整个 导航 条 的 外 边框 */ 
width: 8em; /* 导航 条 边框 * / 


[^4 设置 1i 的 样式 


设置 li 的 样式 代码 如 下 。 


.nav li( 
background - color: #E7E7E7; /* 浅 灰色 背景 * / 
border - top- width: 1px; 1 * 上 刻 线 效果 * / 
border - bottom - width: 1px; /* 下 刻 线 效果 * / 


border - top- style: solid; 

border - bottom - style: solid; 
border- top- color: #F9F9F9; 
border - bottom- color: # ccc; 


[5 设置 导航 中 a 标记 的 样式 


设置 导航 中 a 标记 的 样式 代码 如 下 。 


.nav li a,. nav li a:visited { /* 链接 样式 和 已 访问 链接 样式 * / 
padding: 5px; /* 使 文本 信息 与 边界 有 一 定 距 离 * / 
display: block; /* 形成 按钮 式 链接 的 效果 * / 


text- decoration: none; 

color: #2b3£00; 

font- family: "微软 雅 黑 "; 

font- size: 16px; 
} 
.nav li a:hover( 

background-color: # fff; /* 鼠标 悬 停 时 背景 色 为 白色 * / 
) 


|6. 取消 最 后 一 个 菜单 的 下 边框 
最 后 一 个 菜单 的 下 边框 会 与 列表 的 下 边框 形成 双 实 线 。 为 了 去 掉 一 条 实 线 ,为 最 后 一 











个 列表 项 添加 类 . last。 


<li class = "last"><a href =" 井 "> 家 居 </a></1i> 


再 设置 其 下 边框 样式 为 无 。 
.nav . last { 


border — bottom - style: none; 
} 


这 样 就 实现 了 如 图 5-24 所 示 的 垂直 导航 效果 。 


项 目 总 结 


列表 表现 形式 多 种 多 样 , 本 项 目 主要 介绍 了 列表 样式 类 型 .背景 的 设置 .边框 的 设置 。 
通过 本 项 目的 学 习 , 应 该 掌握 新 闻 列 表 、 导 航 条 和 图 片 列表 的 制作 方法 。 

列表 在 网 站 设计 中 占有 举足轻重 的 地 位 ,因此 ,对 列表 的 相关 知识 理解 与 应 用 对 网 站 的 
设计 将 会 起 到 非常 重要 的 作用 。 


ik 后 练习 


1. 利用 素材 包 中 深 红色 渐变 效果 图 作为 导航 背景 ,红色 图 片 用 于 悬 停 的 背景 ,制作 成 
如 图 5-25 所 示 的 导航 列表 。 














图 5-25 设置 背景 图 片 的 导航 列表 效果 


2. 利用 素材 包 中 的 ar. jpg 图 片 制作 如 图 5-26 所 示 的 新 闻 列表 效果 。 
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图 5-26 ”新 闻 列 表 效果 


项 目 6 





一 一 和 用 户 交 互 一 一 表单 











| 知识 目标 | 

”理解 表单 的 概念 。 

。 了 解 表单 元 素 的 类 型 。 

”了 解 表单 的 属性 。 

> 了解 表单 各 元 素 的 属性 。 

| 技能 目标 | 

。 掌握 表单 常用 元 素 的 使 用 方法 。 

”能 够 利用 属性 设置 不 同 的 表单 效果 。 
* 能够 结合 CSS 样式 改变 表单 外 观 。 
| 素养 目标 | 

”人 掌握 常用 界面 (如 购物 车 ,登录 ) 的 制作 思路 。 
。 探索 一 种 效果 的 多 种 实现 方法 。 
”培养 团结 协作 的 精神 。 

。 培养 一 定 的 自学 能 力 。 


任务 利用 表单 进行 用 户 交 互 


b 学 习 情 境 


在 前 面 的 学 习 中 ,列表 、 图 片 等 元 素 已 经 添加 到 页 面 了 ,并 且 也 设置 了 相应 的 CSS 样式 
而 达到 预期 的 效果 。 目 前 搜索 栏 ,登录 和 注册 等 页 面 中 很 多 元 素 还 没有 添加 ,小 黄 需 要 学 习 
有 关 表 单 的 知识 来 完成 这 些 内 容 。 

本 项 目 首先 介绍 表单 标签 及 其 属性 ; 接着 再 介绍 表单 元 素 ,如 文本 域 . 下 拉 列 表 框 , 单 
选 框 复 选 框 等 ,最 后 介绍 表单 与 CSS 样式 的 结合 实现 多 种 样式 的 表单 效果 。 


b 任务 描述 


页 面 中 需要 包含 搜索 框 的 内 容 ,搜索 框 内 部 需要 显示 默认 搜索 关键 词 , 如 图 6-1 所 示 。 
在 客户 登录 系统 时 需要 提供 一 个 登录 界面 ,该 界面 的 效果 如 图 6-2 所 示 ,提示 输入 账号 和 密 
码 等 。 在 客户 选择 好 商品 后 需要 提供 购物 车 的 界面 .提示 用 户 购买 的 商品 信息 ,如 图 6-3 
所 示 。 

本 任务 主要 内 容 如 下 。 

(1) 添加 搜索 栏 。 

(2) 创建 用 户 登录 界面 。 

(3) 制作 购物 车 页 面 。 

问题 引导 s 

(1) 什么 是 表单 ? 
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图 6-1 搜索 栏 效果 
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图 6-2 会 员 登 录 界面 
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图 6-3 购物 车 效果 
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(2) 表单 有 哪些 元 素 ? 
(3) 如 何 让 它们 展示 不 同 的 外 观 ? 
b 任务 知识 


表单 在 网 页 中 主要 负责 数据 采集 ,通过 脚本 程序 可 以 将 表单 中 采集 的 数据 转移 。 一 个 
表单 有 两 个 基本 组 成 部 分 : 表单 标签 和 表单 元 素 。 表 单 标签 里 面包 含 处 理 表单 数据 传递 方 
式 ; 表单 元 素 包 括 文本 框 \ 密 码 框 \ 隐 藏 域 .多 行文 本 框 , 复 选 框 , 单 选 框 ,下 拉 选 择 框 \ 按 钮 
和 文件 上 传 框 等 。 


Ji. 表单 标签 
过 form> 标 签 有 多 种 属性 , 表 6-1 为 二 form 二 标签 的 常见 属性 及 含义 。 
表 6-1 二 form> 标 签 的 常见 属性 及 含义 





























属 性 值 a Be 
id 表单 标识 
method 表单 的 数据 传递 方式 ,有 get 和 post 两 种 传递 数据 方式 
action 定义 表单 数据 传递 后 的 处 理 页 面 
name 规定 表单 的 名 称 
target 规定 在 何 处 打开 action URL, 值 有 _blank、self、parent、top 和 framename 
accept-charset 规定 服务 器 可 处 理 的 表单 数据 字符 集 
autocomplete 规定 是 否 启 用 表单 的 自动 完成 功能 ,有 on 和 off 两 个 值 
novalidate 设置 了 该 特性 不 会 在 表单 提交 之 前 对 其 进行 验证 


其 中 ,autocomplete 属性 和 novalidate 属性 是 HTML 5 中 的 新 属性 。 
示例 代码 如 下 。 


< form action = "exp_form. asp" method = "post" id = "user_form"> 
First name:< input type = "text" name = "fname" /> 
< input type = "submit" /> 

</form> 


该 表单 中 定义 了 表单 的 标识 为 user_form ,表单 的 数据 传递 方式 为 post, 表 单传 递 后 数 
据 由 exp_form. asp 文件 来 处 理 。method 属性 有 post 和 get 两 个 值 ,post 表示 表单 数据 在 
传递 时 将 所 有 表单 元 素 的 数据 打包 进行 传递 ; get 表示 需要 将 参数 数据 队列 加 到 提交 表单 
的 action 属性 所 指 的 URL 中 , 值 和 表单 内 各 个 字段 一 一 对 应 。 

在 下 面 的 代码 中 ,虽然 还 有 个 文本 框 定义 在 表单 框架 外 ,但 是 可 以 通过 表单 属性 指定 其 
归属 的 表单 。 


Q—— 
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«form action=" exp_form. asp" method = "get" id= "user form"> 
First name:< input type = "text" name = "fname" /> 
< input type = "submit" /> 
</form> 
<p> 下 面 的 输入 域 在 form 元 素 之 外 ,但 仍然 是 表单 的 一 部 分 。</p> 
Last name: < input type = "text" name = "lname" form = "user form" /> 


[2. 表单 元 素 

表单 元 素 是 允许 用 户 在 表单 中 输入 信息 的 元 素 ,如 文本 域 . 下 拉 列 表 、 单 选 框 . 复 选 
框 等 。 

(1) 单行 文本 框 

用 户 可 以 在 单行 文本 框 中 输入 单行 文本 ,HTML 描述 为 二 input type="text" >, K 6-2 
所 示 为 单行 文本 框 的 常见 属性 及 含义 。 


表 6-2 单行 文本 框 的 常见 属性 及 含义 




















属性 值 ci wd 

id 标识 一 个 单行 文本 框 

name 单行 文本 框 名 

value 单行 文本 框 的 初始 值 

Size 单行 文本 框 的 长 度 

maxlength 在 单行 文本 框 中 能 够 输入 的 最 大 字符 数 
示例 代码 如 下 。 


用 户 名 : < input type = "text" id = "user fora" value = "请 在 这 里 输入 用 户 名 ”size = "20" 
maxlength= "10"> 


显示 效果 如 图 6-4 所 示 。 
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用 户 名 ， 请 在 这 里 输入 用 户 名 


图 6-4 单行 文本 框 效果 


单行 文本 框 可 以 设置 为 密码 字段 .HTML 代码 为 二 input type 一 "password" 二 ,示例 代 
码 如 下 。 


——® 








Password: < input type= "password" name = "pwd"> 


显示 效果 如 图 6-5 所 示 。 
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Password: @@@@@@| 





图 6-5 密码 框 效果 


在 HTML 5 中 ,input 元 素 的 type 属性 拥有 更 多 的 值 .例如 它 还 可 以 为 search, 此 时 ,该 
元 素 呈 现 为 一 个 搜索 框 ,换行 符 会 从 输入 值 中 去 掉 。 

(2) 多 行文 本 框 

多 行文 本 框 允许 用 户 填 写 多 行内 容 , HTML 描述 为 二 textarea 二 ... 一 /textarea 二 ,可 以 
通过 cols 和 rows 属性 来 规定 textarea 的 尺寸 ,不 过 更 好 的 办 法 是 使 用 CSS 的 height 和 
width 属性 。 表 6-3 所 示 为 多 行文 本 框 的 常用 属性 及 含义 。 


表 6-3 多 行文 本 框 的 常用 属性 及 含义 











属性 值 Ee ef 
cols 指定 多 行文 本 框 的 可 见 的 列 数 
rows 指定 多 行文 本 框 的 可 见 的 行 数 
name 指定 多 行文 本 框 的 名 称 





disable 使 多 行文 本 框 无 效 ,无 法 填写 

maxlength | 在 多 行文 本 框 中 能 够 输入 的 最 大 字符 数 

off: 不 自动 换行 ,为 默认 动作 

virtual: 将 实现 文本 区 内 的 自动 换行 ,但 在 传输 数据 时 ,文本 只 在 用 户 按 下 Enter 键 的 地 方 
进行 换行 ,其 他 地 方 没有 换行 的 效果 

physical: 将 实现 文本 区 内 的 自动 换行 ,并 以 文本 框 中 的 文本 效果 进行 数据 传递 











wrap 








示例 代码 如 下 。 


< textarea id = "MSG" cols = 40 rows = 4> 网 页 制作 入 门 </textarea>< br> 
< textarea id= "MSG" cols = 40 rows = 4 disable = "disable"> 网 页 制作 入 门 </textarea> 


效果 如 图 6-6 所 示 。 

(3) 单 选 按 钮 

单 选 按钮 是 一 组 可 选择 按钮 ,在 同一 组 按钮 中 只 可 选择 一 个 ,HTML 代码 为 一 input 
type—"radio"—, 3€ 6-4 为 单 选 按钮 的 常用 属性 及 含义 。 
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网 页 制作 入 门 





| 网 页 制作 入 门 








图 6-6 多 行文 本 框 效果 


Rea 单 选 按钮 的 常用 属性 及 含义 














属性 值 * X 
name 单 选 按钮 组 的 名 称 , 同 一 组 按钮 有 相同 名 称 
value 单 选 按钮 进行 数据 传递 时 的 选项 值 
checked 默认 选择 项 

示例 代码 如 下 。 


您 最 喜欢 的 水 果 是 : < br > 
< input type = radio value = "Fruitl" checked name = "fruit"> 苹 果 


< input type = radio value= "Fruit2" name = "fruit"># Ki 
< input type = radio value = "Fruit3" name = "fruit">M fig 
< input type = radio value = "Fruit4" name = "fruit"> 凤 梨 


效果 如 图 6-7 所 示 。 
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您 最 喜欢 的 水 果 是 ， 
回 苹果 OFF OFS 日 凤梨 











图 6-7 单 选 按钮 效果 


实际 应 用 中 ,经 常 希望 点 击 选 项 文字 就 可 以 选择 选项 ,可 以 应 用 for 属性 实现 。 


您 最 喜欢 的 水 果 是 : <br> 
< input type = radio value = "Fruitl" name = "fruit"> 苹 果 


一 一 一 全 
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< input type = radio value = "Fruit2" name = "fruit" 

< input type = radio value = "Fruit3" name = "fruit" Ji fj 

< input type = radio value= "Fruit4" name - "fruit" id= "radiobutton" checked > 
< label for = "radiobutton"> 风 梨 </label > 


最 后 一 个 “凤梨 ”选项 ,由 于 有 checked 属性 ,就 变 成 了 该 组 按钮 的 默认 选项 ,在 点 击 * 凤 
梨 " 文 本 时 也 可 以 选择 该 选项 ,效果 如 图 6-8 所 示 。 
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您 最 喜欢 的 水 果 是 ， 
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图 6-8 H checked 属性 和 for 属性 的 单 选 按钮 效果 


(4) 复 选 框 
复 选 框 是 一 组 可 选择 按钮 ,在 同一 组 选项 中 可 选择 多 个 ,HTML 代码 为 二 input type= 
"checkbox">, # 6-5 为 复 选 框 的 常用 属性 及 含义 。 


ROS 复 选 框 的 常用 属性 及 含义 














属性 值 a X 
name 复 选 框 组 的 名 称 , 同 一 组 按钮 有 相同 名 称 
value 复 选 框 进行 数据 传递 时 的 选项 值 
checked 默认 选择 项 

示例 代码 如 下 。 


<p> 你 的 兴趣 爱好 : </p> 

< label for = "checkbox"> 音 乐 </label > 

< input type = "checkbox" name = "checkbox" value = "checkbox" id = "checkbox">< br > 
< label for = "checkbox2"> 运 动 </label > 

< input type = "checkbox" name = "checkbox" value = "checkbox" id = "checkbox2">< br > 
< label for = "label" >[fi] i€</label > 

< input type = "checkbox" name = "checkbox" value = "checkbox" id= "label">< br > 

< label for = "label2"> 上 网 </label> 

< input type = "checkbox" name = "checkbox" value = "checkbox" id = "label2"> 


效果 如 图 6-9 所 示 。 

(5) 下 拉 列 表 

下 拉 列 表 框 可 容纳 多 个 选项 ,在 下 拉 列 表 框 中 有 列表 标签 和 选项 标签 ,HTML 代码 分 
别 为 : <select 7... — /select— fll—option...-— /option--, K 6-6 MÆ 6-7 分 别 为 下 拉 列 
表 框 和 列表 选项 的 常用 属性 及 含义 。 


O 
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你 的 兴趣 爱好 : 








图 6-9 复 选 框 效 果 


表 6-6 下 拉 列 表 框 的 常用 属性 及 含义 
属性 值 & X 





name 下 拉 列 表 框 名 称 





multiple 允许 多 选 





size 属性 规定 下 拉 列 表 中 可 见 选项 的 数目 。 如 果 size 属性 的 值 大 于 1, 但 是 小 于 列表 中 选 
项 的 总 数目 ,浏览 器 会 显示 出 滚动 条 ,表示 可 以 查看 更 多 选项 


Size 





表 6-7 列表 选项 的 常用 属性 及 含义 














属性 值 a pu 
name 选项 名 称 
value 选项 被 选中 后 进行 数据 传递 时 的 值 
checked 默认 选择 项 
示例 代码 如 下 。 


< label for = "select"> 出 生年 份 </label> 
<select name = "select" > 
<option value= "1981"> 1981 </option> 
<option value = "1981"> 1982 </option> 
< option value = "1981"> 1983 </option> 
<option value= "1981"> 1984 </option> 
<option value = "1981"> 1985 </option> 
</select> 


效果 如 图 6-10 所 示 。 
实际 应 用 中 可 能 需要 多 选 或 者 指定 默认 选项 ,可 参考 以 下 代码 。 


< label for = "select"> 出 生年 份 </label > 
<select name= "select" multiple = "multiple" > 
< option > 1981 </option> 
<option selected = "selected" value = "1"> 1982 </option> 








< option > 1983 </option> 

<option > 1984 </option> 

<option > 1985 </option> 
</select > 


[€ @ file///C/Users/Adm ¥ C| » | 三 








图 6-10 ”下拉 列表 效果 


效果 如 图 6-11 所 示 。 
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图 6-11 可 多 选 下 拉 列 表 效 果 








在 上 述 示例 中 ,我 们 可 以 使 用 Shift 键 选择 连续 选项 ,或 者 使 用 Ctrl 键 选择 特定 选项 。 

(6) 按钮 

网 页 中 常见 的 按钮 有 三 种 : 提交 按钮 重 置 按钮 和 普通 按钮 。 普 通 按钮 往往 用 来 触发 
事件 。 通 常 每 个 表单 域 中 都 有 一 个 提交 按钮 ,可 以 转移 表单 数据 。HTML 代码 分 别 为 : 提 
AE fi £l —  — input type="submit" >, 3 # f £1 ——— — input type =" reset" >, 3f 38i f 
钮 一 一 一 input type="button" >, X 6-8 为 按钮 的 常用 属性 和 事件 。 


表 6-8 按钮 的 常用 属性 和 事件 




















属 性 值 事 件 
name 按钮 名 称 
value 按钮 上 显示 的 文本 
onmousedown 用 户 按 下 鼠标 链 时 触发 的 事件 
onmouseup 鼠标 链 抬 起 时 触发 的 事件 
onclick 点 击 按钮 事件 (包括 鼠标 链 按 下 和 抬 起 两 个 动作 ) 
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以 下 为 一 个 登录 界面 的 示例 列 代 码 。 


< table cellspacing = "0" cellpadding = "0" width = "420" align="center" border = "0"> 
< form id = "form1" name = "form1" method = "post" action= ""> 
< tbody > 
<tr> 
<td>< img height = "36" src = "images/login_adminl. gif" width= "420" /></td> 
</tr> 
<tr> 
<td>< img height = "106" src= "images/login admin2. gif" width= "420" /></td> 
</tr> 
<tr> 
<td width = "420" background = "images/login_admin3. gif" height = "137">< table 
width = "341" border = "0" align = "center" cellpadding = "0" cellspacing = "0"> 
<tr> 
< td height = "25"> 管 理 员 账 号 </td> 
<td height = "25">< input id= "username" style = "FONT - SIZE: 9pt; WIDTH: 120px; 
COLOR: black" maxlength = "18" name = "username" /></td> 
<td height = "25">< input id= "Buttonl" type = "submit" value = "管理 登录 " 
name = "Buttonl" /></td> 
</tr> 
<tr> 
<td height = "25"> 管 理 员 密码 </td> 
<td height = "25">< input id = "userpwd" style = "FONT -- SIZE: 9pt; WIDTH: 120px; 
COLOR: black" type = "password" maxlength= "18" name = "userpwd" /> </td> 
<td height = "25">< input type = "reset" name = "Submit" value = "清除 再 来 " /></td> 


</tr> 
<tr> 
<td height = "25"> &nbsp;</td > 
<td height = "25"» &nbsp;</td> 
< td height = "25">< span style= "HEIGHT: 31px"> 
<input onClick = "window. location = 'index. html'" type = "button" 
value = "返回 首页 " name = "Subnit3" /></span></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td>< img height = "51" src = "images/admin login. jpg" width= "420" /></td> 
</tr> 
«/tbody > 








</form> 
</table> 


效果 如 图 6-12 所 示 。 
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管理 员 账 号 
管理 员 密码 




















图 6-12 按钮 登录 页 面 效 果 


在 该 网 站 登录 界面 中 使 用 到 了 三 种 按钮 。“ 管 理 登 录 ” 是 一 个 提交 按钮 ,提交 按钮 往往 
位 于 表单 域内 , 单 击 后 会 将 表单 域 中 表单 元 素 的 数据 打包 传递 给 action 指定 的 文件 进行 数 
据 处 理 。“ 清 除 再 来 ”是 一 个 重 置 按钮 , 单 击 后 会 将 表单 域 中 表单 元 素 的 数据 清除 ,方便 重新 
再 填写 ;“ 返 回首 页 ”是 一 个 普通 按钮 ,在 按钮 中 定义 了 onclick 事件 ,进行 地 址 跳 转 。 

(7) 隐藏 域 

隐藏 域 在 页 面 中 对 于 用 户 是 不 可 见 的 ,在 表单 中 插入 隐藏 域 的 目的 在 于 收集 或 发 送信 
息 ,以 利于 被 处 理 表单 的 程序 所 使 用 。HTML 代码 为 二 input type="hidden">, 

隐藏 域 有 以 下 几 种 作用 。 

(D 用 户 单 击 提交 按钮 发 送 表单 数据 的 时 候 , 隐 藏 域 的 信息 也 被 一 起 发 送 到 服务 器 。 

© 有 时 用 户 在 提交 表单 的 时 候 需 要 一 些 用 户 信息 ,这 时 使 用 隐藏 域 就 很 方便 ,而 且 也 
避 兔 了 有 浏览 器 不 支持 ,用 户 禁 用 Cookie 的 麻烦 。 

O 一 个 表单 域 中 若 有 多 个 提交 按钮 ,可 以 通过 定义 隐藏 域 来 区 别 每 个 按钮 所 需要 提交 
的 数据 。 

@ 一 个 表单 在 进行 数据 提交 时 也 可 能 有 不 同 作用 ,如 同一 个 表单 可 以 进行 数据 插入 或 
者 数据 修改 ,可 以 通过 定义 隐藏 域 来 区 别 表 单 的 作用 。 
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(8) HTML 5 的 新 增 input 类 型 
(D email, email 类 型 用 于 E-mail 地 址 的 输入 ,在 提交 表单 时 ,会 自动 验证 email 域 的 
fi. HTML 代码 为 二 input type 一 "email" 二 ,示例 代码 如 下 。 


< form action= "" method = "get"> 
E-mail: < input type = "email" name = "user email" /»« br /> 
< input type = "submit" /> 
</form> 
如 果 在 E-mail 文本 框 中 没有 输入 正确 的 E-mail 格式 , 则 在 单 击 提交 按钮 时 会 有 提示 ， 
效果 如 图 6-13 所 示 。 
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图 6-13 E-mail 验证 效果 


@ number, number 类 型 用 于 数值 的 输入 ,可 设 定数 字 的 范围 。HTML 代码 为 二 input 
type="number" >, # 6-9 为 number 类 型 的 常用 属性 及 含义 。 


表 6-9 number 类 型 的 常用 属性 及 含义 

















属性 值 Gi pe 
max 定义 允许 输入 的 最 大 值 
min 定义 允许 输入 的 最 小 值 
step 定义 合法 的 数字 间隔 (如 果 step= "3", WAA AY BE — 30.3.6 等 ) 
value 定义 默认 值 
示例 代码 如 下 。 


« form action=" " method- "get"> 
< input type = "number" name = "points" min = "0" max - "10" step- "3" value= "6" /> 
< input type = "submit" /> 

</form> 


效果 如 图 6-14 所 示 。 
@ range. range 类 型 用 于 一 定 范围 内 数值 的 输入 ,显示 为 滑动 条 。HTML 代码 为 
<input type— "range" 77, X 6-10 为 range 类 型 的 常用 属性 及 含义 。 


——6$ 








(f, @ ztorpeskop TC | » | 三 


n E a 














图 6-14 number 类 型 效果 


表 6-10 range 类 型 的 常用 属性 及 含义 

















属性 值 LEN: 
max 定义 允许 输入 的 最 大 值 
min 定义 允许 输入 的 最 小 值 
step 定义 合法 的 数字 间隔 (如 果 step 二 "3", 则 合法 的 数 是 一 3,0,3,6 等 ) 
value 定义 默认 值 
示例 代码 如 下 。 
音量 大 小 : <br> 


« input type= "range" name= "points" min = "0" max- "10" step- "1"> 


效果 如 图 6-15 所 示 。 
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图 6-15 range 类 型 效果 


(D Date Pickers( 日 期 选择 器 )。HTML 5 拥有 多 个 可 供 选取 日 期 和 时 间 的 新 增 输入 类 
型 : date( 选 取 日 .月 、 年 )、month( 选 取 月 \ 年 )、week( 选 取 周 和 年 )、time( 选 取 小 时 和 分 钟 )、 
datetime( 选 取 时 间 、 日 .月 .年 (UTC 时 间 )), 以 及 datetime-local( 选 取 时 间 、 日 月、 年 (本 地 


时 间 ))。HTML 代码 为 二 input type 一 "date( 其 他 类 型 ) "之 。 注 意 ,IE,. 火 狐 等 浏览 器 不 支 
持 该 类 型 ,示例 代码 如 下 。 
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< form action= "" method = "get"> 
请 输入 时 间 : < input type = "datetime - local" name = "user date" > 
</form> 


效果 如 图 6-16 Bros 。 
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周 日 周 - A 周三 mm a A 
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图 6-16 Date Pickers 类 型 效果 


b 任务 实施 
本 任务 主要 利用 表单 和 CSS 样式 的 结合 产生 如 图 6-1 一 图 6-3 所 示 的 效果 。 


I. 添加 搜索 栏 


搜索 栏 一 般 有 两 部 分 组 成 ,一 个 是 输入 框 ,还 有 一 个 是 提交 按钮 。 输 入 框 显 示 为 搜索 栏 
效果 ,并 显示 默认 关键 词 “ 哈 根 达 斯 ”。 

(1) 添加 HTML 内 容 

本 例 主要 有 两 类 元 素 ,一 个 是 input, 用 于 输入 关键 词 ; 另 一 个 是 button, 用 于 提交 关键 
词 。 用 一 个 class 名 为 header-input 的 DIV 容器 来 容纳 整个 内 容 。 在 input 元 素 中 ， 
placeholder 一 " 哈 根 达 斯 ", 即 设置 默认 关键 词 “ 哈 根 达 斯 ”。placeholder 属性 提供 可 描述 输 
和 内容 预期 值 的 提示 信息 ,在 输入 内 容 为 空 时 显示 ,并 会 在 输入 框 获得 焦点 时 消失 ,其 
HTML 代码 如 下 。 


<div class = "header - input" > 
< form method = "get"> 
< input type = "text" name = "search" id= "search" placeholder = "了 哈 根 达 斯 " > 
< button type = "submit" name = "search- btn" id= "search - btn"> 搜 索 </button> 
</form> 
</div> 
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(2) 设置 样式 
首先 将 所 有 元 素 的 边 距 清 零 , 代 码 如 下 。 
*( 

padding: 0; 


margin: 0; 
) 


接 下 来 设置 输入 框 和 搜索 按钮 的 样式 。 设 置 输入 框 的 宽度 ,内 间距 、 字 号 大 小 和 边框 ; 


搜索 按钮 需要 设置 背景 和 边框 颜色 宽度 高度, 文本 颜色 ,cursor: pointer 用 来 将 鼠标 指针 
变 成 手 的 形状 。 它 们 的 CSS 样式 代码 如 下 。 


# search{ 
width: 184px; 
font- size: 12px; 
padding: 6px 8px; 
border: 1px solid # ccc; 
) 
# search- btn( 
background - color: # D5077F; 
border: 1px solid # bb0f73; 
width: 40px; 
height: 28px; 
color: # fff; 
cursor: pointer; 


} 


至 此 ,如 图 6-1 所 示 的 搜索 栏 效果 就 完成 了 。 


12. 创建 用 户 登录 界面 


如 图 6-2 所 示 的 用 户 登 录 界 面 中 有 登录 窗口 名 称 、 输 入 账号 和 密码 的 输入 框 和 登录 按 
。 当 用 户 没有 账号 时 可 以 点 击 “ 立 即 注册 ”, 忘 记 密 码 时 可 以 点 击 “ 忘 记 密 码 ”。 

(1) 添加 登录 界面 的 HTML 内 容 

在 这 个 界面 可 以 将 内 容 划 分 为 两 个 部 分 ,分 为 登录 窗口 名 称 部 分 和 表单 部 分 。 其 中 表 














单 部 分 分 为 三 部 分 内 容 : 账号 输入 、 密 码 输入 和 登录 按钮 .HTML 代码 如 下 。 


<div class = "login- form"> 

<! -- 登 录 窗 口 名 称 部 分 一 > 

<div class = "mt"> 
< hl > 冰 天 美 帝 会 员 </hl > 
<div class = "regist — link">< a href = " # "»3r BI EE 

</a> &nbsp;« a href = " # "> 忘记 密码 </a> 

</div> 

</div> 
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<! 一 表单 部 分 一 > 
<div class= "form"> 
< form method = "post" onsubmit = "return false;"> 
<! 一 账号 输入 部 分 -一 > 
<div class="item"> 
< label for = "loginname"> 账 号 : </label > 
<input type = "text" name = "loginname" 
placeholder = "用 户 名 /邮箱 /已 验证 手机 "> 
</div> 
<! 一 密码 输入 部 分 -一 > 
<div class= "item"> 
< label for = "loginpwd"> 密 码 : </label > 
< input type = "password" name = "loginpsw" placeholder = "密码 "> 


</div> 
<! -一 登录 按钮 -一 > 
<div> 
<a href = "+">% &nbsp; &nbsp; </a> 
</div> 
</form> 
</div> 
</div> 


结构 搭建 好 之 后 ,默认 显示 出 如 图 6-17 所 示 效 果 。 
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‖ 立即 注册 忘记 密码 
账号 ， 用 户 名 /邮箱 /已 验证 手机 





图 6-17 没有 添加 样式 的 登录 界面 
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(2) 添加 样式 效果 


接 下 来 添加 CSS 样式 , 先 为 边 距 清 零 ,设置 文本 颜色 ,代码 如 下 。 


*( 
padding: 0; 
margin: 0; 

) 

body{ 


color: #404040; 
} 


类 login-form 需要 设置 外 边框 ,宽度 为 400px。 为 了 让 内 部 元 素 与 边框 有 一 定 的 间隙 ， 
设置 20px 的 内 间距 。overflow:hidden 是 为 了 清除 浮动 。 每 个 输入 框 的 宽度 为 330px, 高 度 
和 item 的 高 度 均 为 40px, 并 且 item 和 输入 框 有 一 定 的 边框 。 登 录 按 钮 用 二 a 二 标签 设置 ， 
display: block 转换 成 块 级 元 素 ,实现 一 个 矩形 范围 内 的 链接 效果 。 样 式 代码 如 下 。 


. login- form{ 
width: 400px; 
border: solid 1px #909090; 
margin: 10px auto; 
padding: 20px; 
overflow: hidden; 


) 
.mt( 
height: 40px; 
overflow: hidden; 
) 
.mt hl( 
float: left; 
) 
.regist- link( 
float: right; 
line- height: 40px; 
) 


.regist- link a,.regist- link a:visited{ 
font- size: 12px; 
text- decoration: none; 
color: red; 

) 

.regist- link a:hover, . regist - link a:focus{ 
text — decoration: underline; 


} 
. form{ 
width: 400px; 
margin: 10px auto; 
) 
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.item{ 
width: 390px; 
height: 40px; 


line-height: 40px; 

border: solid 1px #909090; 
margin: 10px 0; 

padding — left: 10px; 
background — color: # eee; 
overflow: hidden; 


} 

. item input{ 
width: 330px; 
height: 40px; 
float: right; 
padding- left: 10px; 
border - left: solid 1px #909090; 
border - right: none; 
border - bottom: none; 
border - top: none; 

) 


form a, form a:visited([ 
display: block; 
width: 400px; 
height: 40px; 
background-color: #D5077F; 
border: solid 1px # BBOF73; 
line-height: 40px; 
text- align: center; 
color: # fff; 
text — decoration: none; 
font- size: 20px; 
font — weight: bold; 

} 

form a:hover, form a: focus{ 
background-color: # f££077F; 


至 此 ,登录 界面 已 经 完成 。 


E 制作 购物 车 


制作 一 个 购物 车 页 面 ,其 效果 如 图 6-3 所 示 。 

(1) 添加 图 片 列表 的 内 容 

购物 车 页 面 可 以 看 作 由 三 大 块 所 组 成 : 购物 车 标题 栏 、 购 物 车 单个 商品 栏 以 及 购物 车 
结算 栏 ,HTML 代码 如 下 。 
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<div class = "cart"> 
<! -- 购物 车 标题 栏 -一 > 
<div class = "cart - thead"> 
<div class = "cart 一 checkbox"> 
< input type = "checkbox" name = "toggle — checkboxes"></ input > 全 选 
</div> 
<div class = "cart — goods"> 商 品 </div> 
<div class = "cart 一 price"> 单 价 (元 )</div> 
<div class = "cart - quantity"> 数 量 </div> 
<div class = "cart - sum"> 小 计 ( 元 )</div> 
< div class = "cart - action"> 操 作 </div> 
</div> 
<! -一 购物 车 单个 商品 项 --> 
<div class = "item" 
<div class = "cart - checkbox"> 
< input type = "checkbox" name = "check - item"></input > 
< img src = "images/mm. png"> 
</div> 
<div class = "cart — goods"> M&amp;M'S 巧克力 豆 冰激凌 </div> 
<div class = "cart — price"» 127.58 </div> 
<div class = "cart - quantity"><a href =" # "» — </a >< input type = "text" value = "1" 
autocomplete = "off"><a href ="#">+</a></div> 
<div class = "cart — sum"> 127.58 </div> 
<div class = "cart — action"><a href = "+ ">M R</a></div> 
</div> 
<! -- 购物 车 单个 商品 项 --> 
<div class= "item"> 
<div class = "cart - checkbox"> 
< input type = "checkbox" name = "check - item"></input > 
< img src = "images/bjr. png"> 
</div> 
<div class = "cart — goods"> MSamp;M'S 巧克力 豆 冰激凌 </div> 
<div class = "cart — price"» 127.58 </div> 
<div class = "cart - quantity"><a href = " # "» — «/a»« input type = "text" value = "1" 
autocomplete = "off"»« a href = "#">+</a></div> 
<div class = "cart — sum"> 127.58 </div> 
<div class = "cart - action"»« a href =" # "M BR</a></div> 
</div> 
<!-- 购物 车 结算 栏 --> 
<div class = "cart — sbm"> 
<div class = "btn"> 
<a href ="+">454%</a> 
</div> 
<div class = "info"> 
已 经 < span» 0 </span > 件 选择 商品 Snbsp; &nbsp; Ñ fft : < span» Y 0.00 </span> 
</div> 
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图 6-18 没有 添加 样式 的 购物 车 界面 


(2) 设置 CSS 样式 
同样 , 先 将 边 距 清 零 ,设置 页 面 字号 大 小 和 颜色 ,代码 如 下 。 


—o 


这 里 设置 整个 购物 车 cart 的 宽度 为 1000px, 居 中 显示 。 标 题 栏 设 置 背景 色 和 边框 , 且 
有 10px 的 内 间距 。 为 每 一 栏 内 部 的 元 素 设置 宽度 ,并 设置 左 浮动 。 最 后 一 个 元 素 右 侧 浮 
动 。 利 用 width 和 height 为 图 片 设置 固定 的 显示 大 小 。CSS 样式 代码 如 下 。 
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.btnf 


} 


width: 150px; 
height: 50px; 
line- height: 50px; 
text- align: center; 
float: right; 


btn a,. btn a:visited( 
text- decoration: none; 
font- size: 20px; 
font- weight: bold; 
display: block; 
color: # fff; 
background-color: #D5077F; 


} 


info{ 
float: right; 
line- height: 30px; 
margin- right: 20px; 


} 
. info span{ 


color: red; 

margin: 0 2px; 

font- size: 16px; 
} 


至 此 ,购物 车 页 面 就 完成 了 。 


Lil 创建 用 户 注 册 界 面 


实 训 目的 

熟悉 并 掌握 表单 元 素 的 使 用 和 CSS 样式 的 设计 技巧 。 

> 实 训 内 容 

利用 前 面 介绍 的 技术 和 方法 ,制作 出 如 图 6-19 所 示 的 效果 。 

















在 注册 界面 需要 用 户 设置 用 户 名 、 密 码 和 验证 信息 等 。 在 验证 码 栏 有 “获取 短信 验证 
码 ” 按 钮 ,阅读 协议 链接 前 面 有 个 复 选 框 ,默认 为 选中 状态 。 最 后 需要 有 一 个 “立即 注册 ” 
按钮 。 
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请 设置 密码 ， 

请 确认 密码 : 

验证 手机 : 
短信 验证 码 ， PES 
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图 6-19 用 户 注册 界面 效果 
b 实 训 步 又 


L. 设计 思路 分 析 


将 前 五 行 看 作 由 label 和 input 所 组 成 , 放 在 类 item 中 ; 第 六 行 需 要 插入 一 个 
checkbox, 并 利用 checked 二 "cheched" 形 成 已 经 选中 的 状态 ; 第 七 行 制作 一 个 按钮 式 链接 
“立即 注册 ”。 


12. 输入 HTML 代码 


HTML 代码 如 下 。 


<div class = "regist"> 
< form method = "post"> 
== ME === 
<div class = "item"> 
< label > 用 户 名 : </label > 
< input type = "text"></input > 
</div> 








<q- #6 ——> 
<div class = "item"> 
< label > 请 设置 密码 : </label > 
< input type = "password"></input > 
</div> 
<! -- 确认 密码 --> 
<div class= "item"> 
< label > 请 确认 密码 : </label > 
< input type= "password"></input> 
</div> 
<! -- 手机 号 码 --> 
<div class = "item"> 
< label > 验证 手机 : </label > 
< input type = "text"></input > 
</div> 
<!-- 验证 码 --> 
<div class = "item"> 
< label > 短信 验证 码 : </label > 
< input class = "lastitem" type= "text"></input > 
<a href ="#" > 获取 短信 验证 码 </a> 
</div> 
<! -一 同意 协议 --> 
<div class= "protocol"> 
< input type = "checkbox" checked = "cheched"></input > 
< span > 我 已 阅读 并 同意 </span ><a href = " # "> 冰 天 美 帝 用 户 注册 协议 </a> 
</div> 
<! -- 注册 按钮 -一 > 
<div class = "btn"> 
<a href - " £" > 立即 注册 </a> 
</div> 
</form> 
</div> 


此 时 效果 如 图 6-20 所 示 。 


l5 添加 css 样式 


先 将 边 距 清 零 ,设置 注册 区 域 的 宽度 、 内 间距 和 外 边框 ,代码 如 下 。 


xt 
padding: 0; 
margin: 0; 
) 
.regist( 
width: 550px; 
padding: 20px; 
margin: 20px auto; 
border: 1px solid # e0e0e0; 
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图 6-20 添加 样式 前 的 注册 界面 


再 来 设置 其 他 样式 。 第 五 行 中 短信 验证 码 后 面 的 input 宽度 大 小 和 前 面 的 宽度 大 小 不 
一 致 ,所 以 此 处 定义 类 lastitem, 利 用 width: 100px ! important 设置 其 宽度 。 利 用 .item 
label(text-align: right; ) 设置 label 内 的 文本 为 右 对 齐 。 完 整 的 CSS 样式 代码 如 下 。 


. item{ 
width: 450px; 
margin: 10px 0; 
overflow: hidden; 

) 

. item label{ 
width: 200px; 
height: 36px; 
line-height: 36px; 
color: #606060; 
text-align: right; 
float: left; 

} 

. item input{ 
width: 240px; 


至 此 ,一 个 注册 界面 就 完成 了 。 
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项 目 总 结 


随 着 网 页 的 交互 性 需求 越 来 越 高 ,表单 成 为 网 页 中 越 来 越 重 要 的 部 分 。 表 单 的 作用 是 
使 用 户 能 够 与 系统 进行 交互 ,例如 进行 注册 、 登 录 、 搜 索 等 各 种 操作 。 利 用 CSS 样式 可 以 设 
计 出 多 种 复杂 的 表单 效果 。 


课 后 练习 
1. 制作 一 个 搜索 栏 ,效果 如 图 6-21 所 示 。 
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图 6-21 搜索 栏 


2. 利用 素材 包 中 的 img. png 文件 制作 出 如 图 6-22 所 示 的 注册 页 面 。( 注 : 圆 角 边框 效 
果 可 以 参考 项 目 5 中 的 知识 点 border-radius) 
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图 6-22 注册 页 面 





一 美化 页 面 








| 知识 目标 | 

* 了解 美化 页 面 的 主要 方法 。 

。 理解 文本 阴影 属性 。 

* 理解 CSS 3 边框 的 属性 。 

t 理解 视 差 效 果 的 方法 。 

。 理 解 图 标 字 体 。 

| 技能 目标 | 

* 能够 设置 文本 阴影 。 

。 能 够 使 用 CSS 3 设置 边框 属性 。 
* 能够 设置 视差 效果 。 

。 会 设置 网 页 字体 。 

。 能 够 利用 图 标 字 体 美化 页 面 。 
| 素养 目标 | 

。 掌握 视差 效果 的 制作 思路 。 

。 探 索 一 种 效果 的 多 种 实现 方法 。 
。 培养 自学 ,探索 的 能 力 。 


任务 对 页 面 进行 美化 


b 学 习 情 境 

小 黄 在 前 面 的 学 习 中 已 经 做 出 基本 的 框架 ,大致 的 样式 也 实现 了 ,但 是 ,在 一 些 细节 方 
面 还 没有 达到 理想 的 要 求 。 例 如 ,给 文本 设置 投影 的 效果 .用 图 标 字体 装饰 页 面 等 。 还 需要 
学 习 美化 页 面 的 知识 。 

本 项 目 主要 介绍 常用 的 美化 页 面 方法 : 添加 文本 效果 ,设置 圆 角 边框 ,形成 CSS 视差 ， 
以 及 添加 字体 型 图 标 。 


> 任务 描述 


为 了 突出 显示 ,小 黄 希 望 将 “更 多 精 选 商品 ”加 上 投影 ,如 图 7-1 中 区 域 1 所 示 ; 区 域 2 
中 搜索 框 的 背景 为 圆 角 框 , 并 且 需 要 用 图 标 字 体 生 成 搜索 和 购物 车 图 片 的 效果 。 

本 任务 主要 内 容 如 下 。 

(1) 给 文本 设置 投影 。 

(2) 设置 圆 角 边框 。 

(3) 用 图 标 装饰 网 页 。 

问题 引导 : 

(1) 文本 的 投影 是 如 何 添 加 的 ? 
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图 7-1 美化 效果 图 


(2) 不 用 图 片 处 理 软件 能 和 否 做 出 圆 角 的 边框 效果 ? 
(3) 能 不 能 在 不 使 用 图 片 的 情况 下 ,使 用 不 安全 的 字体 (用 户 浏览 器 没有 安装 的 字体 )? 
(4) 如 何 让 图 标 放 大 而 不 失真 ? 


b 任务 知识 


为 了 让 整个 页 面 更 加 美观 大 方 ,还 需要 对 页 面 元 素 细节 加 以 修饰 。 修 饰 美化 页 面 
的 方法 有 很 多 ,可 以 利用 CSS 3 的 新 增 属性 text-shadow 为 文本 添加 阴影 ,可 以 在 不 使 
用 图 像 的 基础 上 使 用 border-radius 属性 设置 圆 角 边 框 效 果 , 还 可 以 使 用 图 标 字 体 修饰 
页 面 等 。 


L. CSS 3 文本 阴影 


在 CSS 3 中 变化 比较 大 的 一 项 内 容 便 是 与 网 页 排版 相关 的 技术 。 现 在 不 需要 使 用 任何 
JavaScript 代码 或 图 片 即 可 实现 丰富 的 文本 样式 效果 ,例如 text-shadow 可 以 创建 阴影 


效果 。 
text-shadow 即 文本 阴影 , 它 可 以 设置 水 平 阴影 、 垂 直 阴 影 、 模 糊 的 距离 ,以 及 阴影 的 颜 
色 ,其 语法 如 下 。 


text — shadow: h- shadow v 一 shadow blur color; 


text-shadow 属性 值 及 含义 如 表 7-1 所 示 。 
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表 7-1 text-shadow 属性 值 及 含义 

















属性 值 a Xx 
h-shadow 水 平 阴 影 的 位 置 (必需 ) 
v-shadow 垂直 阴影 的 位 置 (必需 ) 
blur 模糊 的 距离 (可 选 ) 
color 阴影 的 颜色 (可 选 ) 


下 面 为 HTML 代码 。 
<hl > 


这 里 是 文本 阴影 效果 。 
</hl > 


其 样式 代码 如 下 。 
mf 


text- shadow: 5px 5px 5px # 00ff00; 
i} 


最 终 样式 效果 如 图 7-2 所 示 。 
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图 7-2 文本 阴影 效果 


不 过 ,IE 9 以 及 更 早 的 版 本 不 支持 text-shadow 属性 ; IE 10 及 其 他 主流 浏览 器 支持 该 
属性 。 


12. CSS 3 边框 


利用 CSS 3 可 以 在 不 使 用 图 片 处 理 软 件 的 情况 下 ,创建 圆 角 边框 ,给 和 矩形 设置 阴影 ,使 
用 图 片 绘制 边框 。 

(1) border-radius 

CSS 3 中 的 border-radius 属性 可 以 轻松 地 设置 元 素 的 圆 角 边框 ,其 语法 如 下 。 
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border — radius: 1 一 4 length| % / 1-4 length| € ; 


圆 角 的 形状 可 以 通过 以 具体 的 length 值 或 百分比 的 方式 来 设置 ,例如 : 
border — radius:2em; 

或 者 
border — radius:105 ; 


都 可 以 实现 一 定 的 圆 角 边框 效果 。 

该 语法 中 ,和 斜 杠 前 面 第 一 个 参数 表示 圆 角 的 水 平 半径 ,第 二 个 参数 表示 圆 角 的 垂直 半 
径 。 第 二 个 参数 一 般 省 略 , 表 示 和 水 平 半径 值 一 样 。 

border-radius 属性 是 一 个 简写 属性 , 它 相 当 于 border-* -radius。 例 如 ,border-radius: 
2em, 等 价 于 下 面 的 代码 。 


border — top- left - radius:2em; 
border — top- right — radius: 2em; 
border — bottom - right — radius: 2em; 
border — bottom - left — radius:2em; 


当 border-radius 有 四 个 参数 值 时 ,它们 分 别 表示 顺 时 针 的 方向 一 be Efi FAS 
左 的 圆 角 半径 ,代码 如 下 。 


border - radius:5px 10px 20px 50px; 


其 样式 效果 如 图 7-3 所 示 。 

当 border-radius 有 两 个 参数 的 时 候 , 分 别 表示 上 左 和 下 右 、 上 右 和 下 左 ; 三 个 参数 分 别 
表示 上 左 、 上 右 和 下 左 、 下 右 。 

为 了 兼容 老 版 本 浏览 器 ,一 般 使 用 前 绥 ,-moz 和 -webkit, 例 如 : 

— moz - border - radius: 5px 10px 20px 50px; /* 老 的 Firefox */ 

— webkit- border - radius: 5px 10px 20px 50px; /* 老 的 Safari */ 

border - radius:5px 10px 20px 50px; 


(2) box-shadow 


box-shadow 属性 可 以 为 矩形 框 添加 一 个 或 多 个 阴影 ,其 语法 如 下 。 


box - shadow: h- shadow v — shadow blur spread color inset; 


box-shadow 属性 值 及 含义 如 表 7-2 所 示 。 
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图 7-3 边框 角度 效果 


3X 7-2 box-shadow 属性 值 及 含义 























属性 值 a X 

h-shadow 水 平 阴影 的 位 置 (必需 ) 

v-shadow 垂直 阴影 的 位 置 (必需 ) 

blur 模糊 距离 (可 选 ) 

spread 阴影 的 尺寸 (可 选 ) 

color 阴影 的 颜色 (可 选 ) 

inset 将 外 部 阴影 改 为 内 部 阴影 (可 选 ) 
例如 : 
img{ 


— moz — box - shadow: 3px 3px 6px #666; 
— webkit —— moz - box — shadow:3px 3px 6px # 666; 
box- shadow:3px 3px 6px #666; 

} 


该 阴影 为 水 平和 垂直 有 3px 的 偏 移 ,投影 的 模糊 距离 6px, 投 影 颜 色 为 #666, 实 现 的 样 
式 效果 如 图 7-4 所 示 。 

(3) border-image 

border-image 属性 和 CSS 2 中 background 属性 有 点 类 似 , 也 包括 图 片 、 剪 裁 位 置 和 重 
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图 7-4 和 矩形 框 阴影 效果 


复 性 。border-image 属性 是 一 个 简写 属性 ,用 于 设置 以 
下 属性 。 
border-image-source( 用 在 边框 的 图 片 的 路 径 ); 
border-image-slice( 图 片 边框 向 内 偏 移 ); 
border-image-width( 图 片 边框 的 宽度 ); 
border-image-outset (边框 图 像 区 域 超出 边框 
的 量 ); 
border-image-repeat (图 像 边 框 是 否 应 平 铺 
(repeated) 、 铺 满 (rounded) 或 拉 伸 (stretched) ) 。 
图 7-5 所 示 为 素材 图 片 , 下 面 代 码 实现 的 效果 如 
图 7-6 所 示 。 


图 7-5 素材 图 片 


# bdimage { 
— webkit — border ~ image: url(img/7 — 5.png) 60 60 round; 
— moz - border - image: url(img/7 — 5.png) 60 60 round; 
border - image: url(img/7 — 5.png) 60 60 round; 
height: 200px; 
width: 500px; 








border - top- width: 15px; 
border - right - width: 15px; 
border - bottom - width: 15px; 
border - left - width: 15px; 
border - top- style: solid; 
border - right - style: solid; 
border - bottom - style: solid; 
border - left- style: solid; 











图 7-6 图 片 边框 效果 


目前 ,IE 11, Firefox,Opera 15 .Chrome 与 Safari 6 浏览 器 支持 border-image 属性 。 


1:. CSS 视差 效果 


利用 背景 图 像 可 以 实现 一 定 的 视差 效果 , 即 当 调整 窗口 大 小 时 ,背景 图 像 会 产生 不 同 速 
度 的 移动 。 可 以 使 得 整个 页 面 有 层次 有 深度 ,添加 活泼 感 。 

为 了 实现 该 效果 ,需要 创建 几 个 不 同 的 背景 图 片 。 首 先 在 body 元 素 上 设置 主 背景 和 颜 
色 , 再 创建 一 个 DIV 容器 放置 男 一 个 背景 图 像 ,并 设置 两 个 背景 图 像 相对 于 窗口 大 小 有 不 
同 的 水 平 偏 移 ,这 样 就 能 产生 视差 效果 。HTML 代码 如 下 。 





样式 代码 如 下 所 示 。 


body { 
background-color: #09F; /* 设置 蓝 色 背 景色 * / 
background - image: url(img/bg - back. png); /* 设置 背景 图 像 * / 
background - repeat: repeat - x; /* 背景 图 像 水 平 重复 * / 
background - position: 20% Opx; /* 产生 20% 的 偏 移 */ 
# frontgound { 
height: 600px; 
width: 100 % ; 
background — image: url(img/bg - front. png) ; /* 设置 前 景 图 像 * / 
background - repeat: repeat — x; /* 水 平 重复 * / 
background - position: 150% Opx; /x 产生 150% 的 偏 移 * / 
} 


当 水 平 调整 浏览 器 窗口 大 小 时 ,不 同 的 背景 图 片 会 以 不 同 速度 移动 ,产生 有 深度 的 感 
觉 ,如 图 7-7 和 图 7-8 所 示 。 
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图 7-7 调整 窗口 大 小 前 的 效果 





© Bef HTS SAY LORE paralla hrl 





图 7-8 调整 窗口 大 小 后 的 效果 


| 4. @font-face 


往常 在 网 页 中 通常 定义 一 个 安全 的 字体 ( 即 用 户 的 计算 机 上 安装 好 的 字体 ) ,以 便 用 户 
的 机 器 能 够 正常 显示 。 如 果 需 要 用 到 特殊 字体 ,一 般 将 其 制作 成 图 片 再 使 用 。 但 是 这 种 方 
法 比较 麻烦 ,不易 修改 。 

现在 ,通过 CSS 3 的 @font-face, 即 可 以 在 不 使 用 图 片 素材 的 情况 下 使 用 任何 字体 了 ， 
不 需要 考虑 用 户 的 机 器 上 是 否 安 装 了 该 字体 。 

@font-face 的 语法 如 下 。 


@font - face{ 
font — family:< Your WebFontName >; 
src:< source »[« format >][,< source >< format >] * ; 
[font — weight: < weight >]; 
[font — style: <style>]; 
} 


其 中 ,Your WebFontName 为 自己 定义 的 字体 名 称 ; source 为 字体 的 存放 路 径 ; format 
为 自 定义 的 字体 , 供 浏 览 器 识别 ,其 格式 主要 有 truetype、opentype、truetype-aat、embedded- 
opentype,avg 等 。 

不 同 浏览 器 对 字体 格式 的 支持 是 不 一 致 的 ,如 Firefox, Chrome, Safari 以 及 Opera X 
持 . ttf (TrueType Fonts) 和 . otf (OpenType Fonts) 类 型 的 字体 。IE 9 十 支持 新 的 @font- 
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face 规则 ,但 是 仅 支持 . eot 类 型 的 字体 (Embedded OpenType). IE 8 以 及 更 早 的 版 本 不 支 
持 新 的 @font-face 规则 。 

这 就 意味 着 在 @font-face 中 至 少 需要 . woff 和 . eot 两 种 格式 字体 ,甚至 还 需要 . svg 等 
字体 以 得 到 更 多 种 浏览 版 本 的 支持 。 为 了 使 @font-face 得 到 更 多 的 浏览 器 支持 ,Paul Irish 
写 了 一 个 独特 的 @font-face 语法 叫 Bulletproof @font-face, 代 码 如 下 。 


(à font - face { 
font- family: 'YourWebFontName'; 


src: url( 'YourWebFontName. eot?') format('eot'); /*IE*/ 
src:url('YourWebFontName.woff') format( 'woff'), url( YourWebFontName. ttf ') 
format( 'truetype'); / * non- IE* / 


) 


font-weight 定义 字体 是 否 为 粗 体 ,如 bold normal; font-style 定义 字体 ,如 italic, 

以 在 dafont. com 下 载 sound of silenceregular 字体 为 例 , 在 下 载 字 体 页 面 找到 该 字体 ， 
并 单 击 相应 Download 按钮 ( 见 图 7-9)。 下 载 后 解压 会 得 到 Sound of silence. ttf 的 特殊 字 
体 。 现 在 需要 得 到 @ font-face 所 需 的 . eot、. woff,. ttf、. svg 字体 格式 ,这 时 可 以 采用 
fontsquirrel 页 面 字 体 生 成 器 (http://www. fontsquirrel. com/tools/webfont-generator) Æ 
成 这 些 格 式 的 文件 ( 见 图 7-10)。 
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图 7-9 从 dafont. com 下 载 字体 
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WEBFONT GENERATOR 


Usage: Click the "Add Fonts" button, check the agreement and download your fonts. you need more fine-grain control, 
choose the Expert option. 


UPIOADFONTS 个 


You currently ave no fonts uploaded. 


35 FREE IMAGES 
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图 7-10 fontsquirrel 页 面 字体 生成 器 


下 载 的 字体 加 载 到 本 地 项 目 后 ,就 可 以 制作 该 样式 了 ,代码 如 下 。 


(à font - face{ 
font — family: sound_of_silenceregular; 
src:url(font/Sound % 200f % 20silence — webfont. eot); 
src:url(font/Sound % 200f % 20silence - webfont. svg) ; 
src:url(font/Sound % 200f % 20silence — webfont. ttf); 
src:url(font/Sound % 200f % 20silence - webfont. woff) ; 

} 

h1. fontface{ 
font — family: sound_of_silenceregular; 

} 


HTML 代码 如 下 。 


<hl class = "fontface"> Sound of silence </hl > 


最 终 的 样式 效果 如 图 7-11 所 示 。 

因为 中 文字 体 过 于 庞大 ,小 则 三 五 兆 . 大 则 十 几 兆 ,所 以 在 线 字 体 只 流行 于 英文 网 站 。 
不 过 通过 按 需 截取 的 方式 生成 小 字库 ,可 以 小 到 几 十 KB. JL KB, 可 以 有 效 控制 字体 文 
件 的 大 小 ,使 中 文 也 加 入 了 网 络 字体 的 阵营 。 

下 面 代 码 为 在 “有 字库 ”网 站 (http://www. youziku. com/ Home/recommend) 中 使 用 奶 
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图 7-11 利用 @font-face 产生 的 特殊 字体 效果 


油 小 甜心 字体 的 方法 ,在 需要 实现 效果 文字 的 HTML 代码 标签 属性 中 添加 代码 “font- 
family:NaiYou230821;”, 代 码 如 下 。 


<hl style = "font - family:NaiYou230510;"> 奶 油 小 甜心 效果 </hl > 
在 二 head 二 标签 中 添加 以 下 代码 。 


< link href = 'http://www. youziku. com/webfont/CSS/88dbe0f7f92311cab6ad192d5aa6411d' rel = ' 
stylesheet' type = 'text/css'/> 


最 终 实 现 的 效果 如 图 7-12 所 示 。 
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图 7-12 奶油 小 甜心 字体 效果 


ney aie 人 





注意 : 


效果 。 


测试 时 ,需要 通过 本 地 建立 的 虚拟 网 站 或 发 布 到 外 网 进行 测试 ,否则 看 不 到 


[5 图 标 字 体 

之 前 在 设计 网 站 页 面 时 比较 纠结 的 一 个 问题 就 是 位 图 图 片 不 能 很 好 地 进行 缩放 , 当 图 
片 进行 放大 时 会 失真 ( 即 变 模糊 ), 当 图 片 进 行 缩 小 时 就 会 浪费 掉 像素 。 而 且 加 载 每 一 张 图 
片 都 需要 一 次 HTTP 请 求 , 因 此 也 拖 慢 了 整个 页 面 的 加 载 时 间 。 另 外 ,要 是 没有 图 片 编辑 
器 (软件 ?的 话 就 很 难 对 图 片 进 行 编辑 ` 处 理 等 操作 。 

字体 就 不 会 有 以 上 这 些 问题 ,字体 可 以 进行 随意 缩放 并 且 每 一 个 字符 都 不 需要 进行 额 
外 的 HTTP 请 求 , 这 时 图 标 字 体 就 出 现 了 。 现 在 ,人 们 把 网 站 中 用 到 的 各 种 图 标 使 用 font 
来 实现 , 即 图 标 字体 (icon font)。 图 标 字体 是 字体 文件 ,用 符号 和 字形 的 轮廓 ( 像 箭头 、 文 件 
来 ,放大镜 等 ) 代 替 标 准 的 文字 。 使 用 图 标 字体 相对 于 基于 图 片 的 图 标 来 说 ,有 如 下 的 好 处 。 


(D 可 
(2) n 
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[自由 变化 大 小 。 
可 自由 修改 颜色 。 


添加 阴影 效果 。 


(4) 支持 IE 6。 
(5) 支持 图 片 图 标的 其 他 属性 ,如 透明 度 和 旋转 等 。 


(6) 只 


要 浏览 器 支持 ,可 以 添加 text-stroke 和 background-clip; text 等 属性 。 


目前 有 很 多 图 标 字 体 库 ,如 Font Awesome, Foundation Icon Fonts 2、icomoon、 阿 里 
icon font 等 ,这 里 以 Font Awesome 为 例 来 讲解 如 何 使 用 。 

到 http://www. bootcss. com/p/font-awesome/ 下 载 Font Awesome 3.0, 图 7-13 所 示 
为 Font Awesome 的 下 载 页 面 。 





LE 


d CSS 














6 giussemr 





图 7-13 Font Awesome 下 载 页 面 


sits 





下 载 解压 后 会 看 到 font 文件 夹 , 里 面 有 我 们 需要 的 字体 格式 。 将 font 文件 夹 和 font- 
awesome. min. css 文件 复制 到 项 目 中 ,在 HTML X Pf — head — P 5| A. font-awesome 
. min. css 文件 ,代码 如 下 。 


< link href = "css/font - awesome. min. css" rel = "stylesheet" type = "text/css" /> 


图 标 类 不 能 和 其 他 组 件 直接 联合 使 用 。 它 们 不 能 在 同一 个 元 素 上 与 其 他 类 共同 存在 。 
应 该 创建 一 个 由 套 的 二 span 二 或 者 二 i 二 标签 ,并 将 图 标 类 应 用 到 这 个 标签 上 。 在 HTML 
文档 的 王 body 之 中 输入 如 下 代码 。 


< i class = "icon- briefcase"></i > icon - briefcase 

< i class = "icon — briefcase icon- large"></i> icon- briefcase 
< i class = "icon- briefcase icon- 2x"></i> icon- briefcase 

< i class = "icon- briefcase icon- 3x"></i> icon- briefcase 

< i class = "icon - briefcase icon- 4x"></i> icon - briefcase 

< i class = "icon- briefcase icon- 5x"></i> icon- briefcase 


通过 应 用 icon-large( 增 大 33% ) ,icon-2x,icon-3x,icon-4x 或 icon-5x 样式 让 图 标 变 得 更 
大 。 最 终 效果 如 图 7-14 所 示 。 
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Hl 7-14 Font Awesome 图 标 字 体 效果 


b 任务 实施 


下 面 利用 text-shadow 完成 文本 阴影 效果 ,利用 border-radius 属性 实现 元 素 圆 角 边 框 ， 
利用 Font Awesome 图 标 字体 添加 搜索 和 购物 车 图 标 。 


I. 设置 文本 效果 


在 一 个 图 像 上 显示 文字 ,并 且 该 文字 有 阴影 效果 ,如 图 7-1 中 区 域 1 所 示 , 具 体操 作 步 
又 如 下 。 

(1) 添加 文本 内 容 

首先 添加 需要 显示 的 图 像 和 文字 。 为 了 更 好 地 控制 文本 信息 ,用 过 span 之 标签 完成 。 
设置 类 名 为 . ickbuy-more-title, 代 码 如 下 。 


—© 








<div class = "ickbuy - more"> 
<a href="#"> 
< img src = "img/ickbuy- more. png" alt = "更 多 精 选 商品 "> 
< span class = "ickbuy - more -title"> 更 多 精 选 商品 </span > 
</a> 
</div> 


图 7-15 所 示 为 无 样式 效果 。 
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图 7-15 添加 样式 前 效果 图 


(2) 设置 文本 信息 的 位 置 
为 了 让 文本 信息 显示 在 图 片上 面 ,需要 设置 其 位 置 为 position: absolute, 再 利用 left 和 
top 控制 其 具体 位 置 , 代 码 如 下 。 


. ickbuy- more - title{ 
position: absolute; 
left: 20px; 
top:20px; 

) 


同时 ,还 要 设置 文本 元 素 的 父 元 素 position: relative, 代 码 如 下 。 


. ickbuy- more { 
position: relative; 
) 


此 时 ,预览 效果 如 图 7-16 所 示 。 
(3) 设置 文本 颜色 和 阴影 
蓝 色 文本 不 是 很 美观 ,可 设置 为 白色 .同时 加 粗 和 修改 字号 ,代码 如 下 。 

















图 7-16 文本 位 置 调整 后 的 效果 


. ickbuy- more - title( 
position: absolute; 
left: 20px; 
top:20px; 
color: # fff; 
font- size: 20px; 
font — weight: bolder; 


利用 text-shadow 属性 可 设置 文本 的 阴影 效果 。 


text — shadow:lpx 2px 3px rgba(0,0,0,0.5); 


设置 文本 效果 的 完整 样式 代码 如 下 。 


. ickbuy- more - title( 
position: absolute; 
left: 20px; 
top:20px; 
color: #fff; 
font- size: 20px; 
font- weight: bolder; 
text- shadow: 1px 2px 3px rgba(0,0,0,0.5); 

} 

. ickbuy— more { 
position: relative; 

} 


至 此 ,文本 样式 效果 就 完成 了 ,最 终 效果 如 图 7-17 所 示 。 
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图 7-17 文本 阴影 效果 


12. 创建 圆 角 边框 


如 图 7-1 区 域 2 所 示 ,搜索 图 标 背 景 为 圆 角 边框 。 设 置 圆 角 边框 背景 的 操作 步骤 如 下 。 
(1) 添加 内 容 


因为 本 例 需 要 实现 一 个 搜索 按钮 ,内 部 需要 放置 搜索 图 标 ,所 以 这 里 用 一 button 二 标签 
来 制作 ,代码 如 下 。 


< button type = "submit" name = "search- btn" id = "search- btn"></button > 
因为 仅 设置 了 值 属性 ,没有 设置 任何 样式 ,所 以 其 效果 如 图 7-18 所 示 。 
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图 7-18 无 内 容 的 按钮 效果 
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(2) 设置 元 素 大 小 和 背景 
设置 元 素 大 小 为 28pxX28px, 背 景 颜色 为 # d5077f, 并 且 设 置 边框 为 1 像素 大 小 的 实 
线 ,代码 如 下 。 


# search - btn { 
background-color: #d5077£; 
width: 28px; 
height: 28px; 
border: solid 1px # bb0f73; 

} 


效果 如 图 7-19 所 示 。 
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图 7-19 设置 大 小 和 颜色 后 的 按钮 


(3) 设置 圆 角 边框 
可 以 利用 border-radius 设置 圆 角 边框 效果 ,这 里 设置 四 个 角 的 圆 角 半径 都 为 4px。 


border — radius: 4px; 


设置 后 ,样式 效果 如 图 7-20 所 示 。 

(4) 设置 鼠标 指针 类 型 

此 时 , 当 鼠 标 指针 移动 到 搜索 框 内 部 时 没有 出 现 链接 指针 效果 ,因此 需要 设置 cursor: 
pointer, cursor 属性 定义 了 鼠标 指针 移入 一 个 元 素 边界 范围 内 时 的 光标 形状 ,pointer ff f 
鼠标 指针 呈现 为 指示 链接 的 指针 , 即 一 只 手 的 形状 。 


cursor: pointer /=* 使 鼠标 出 现 链接 指针 效果 * / 


—® 

















图 7-20 圆 角 边框 效果 


创建 圆 角 边框 的 完整 样式 代码 如 下 。 


# search- btn ( 
background-color: #d5077f£; 
width: 28px; 
height: 28px; 
border: solid 1px # bb0£73; 
border - radius: 4px; 
cursor: pointer; 


} 


至 此 ,搜索 按钮 的 圆 角 边框 背景 效果 就 完成 了 。 


E 使 用 图 标 字体 

在 学 习 了 图 标 字体 知识 后 ,可 以 利用 图 标 字 体 为 图 7-1 区 域 2 中 添加 搜索 图 标 和 购物 
车 的 图 标 。 

(1) 添加 搜索 图 标 

下 面 以 创建 圆 角 边框 为 基础 ,以 此 为 背景 添加 搜索 图 标 。 这 里 采用 Font Awesome 图 
标 字 体 库 。 将 之 前 介绍 下 载 的 Font Awesome 字体 文件 夹 和 font-awesome. min. css 文件 复 
制 到 本 项 目 中 ,并 且 在 二 head 二 内 部 链接 该 样式 。 


« link href = "css/font - awesome. nin.css" rel = "stylesheet" type= "text/css" /> 
TE button FJ S28 I —i— te ,并且 设置 类 名 称 为 icon-search。 
< button type = "submit" name = "search- btn" id= "search- btn"> 


«i class = "icon - search"></i> 
</button > 


EUM o samas 





其 样式 效果 如 图 7-21 所 示 。 
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图 7-21 添加 图 标 字体 后 的 效果 


(2) 修饰 搜索 图 标 
还 有 一 些 细节 需要 修饰 ,如 黑色 的 图 标 不 够 美观 ,可 以 考虑 将 搜索 图 标 改 成 白色 。 因 为 
图 标 字体 也 是 一 种 字体 文件 ,所 以 修改 图 标 颜 色 时 只 须 修改 color 即 可 ,代码 如 下 。 


# search- btn ( 
background-color: #d5077£; 
width: 28px; 
height: 28px; 
border: solid 1px # bb0f73; 
border - radius: 4px; 
cursor: pointer; 
color: # fff; 

} 


另外 ,搜索 图 标 略 小 ,可 添加 类 icon-large 来 修改 搜索 图 标的 大 小 。 


< button type = "submit" name = "search- btn" id = "search- btn"> 
< i class = "icon- search icon- large"></i> 
</button > 


最 终 效果 如 图 7-22 所 示 。 

(3) 添加 购物 车 图 标 

添加 购物 车 的 图 标 字 体 还 是 采用 同样 的 方法 ,在 button 标签 后 面 加 上 关于 购物 车 的 
二 div 之 标签 ,代码 如 下 。 


< button type = "submit" name = "search- btn" id= "search- btn"> 
< i class = "icon- search icon- large"></i> 
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图 7-22 修饰 搜索 图 标 后 效果 


</button > 
<div class = "nav - cart"> 
<a href="#"> 
< span > 购物 车 </span > 
</a> 
</div> 


为 了 添加 购物 车 的 图 标 字体 ,在 二 span 元 素 前 面 加 上 一 对 二 i 二 标签 ,并 用 类 icon- 
shopping-cart 来 显示 购物 车 图 标 ,用 类 icon-2x 设置 该 图 标的 大 小 。 


< i class = "icon- shopping- cart icon- 2x"»«/i» 


再 添加 类 nav-cart 的 样式 代码 。 


.nav- cart,.nav— cart af 
margin- left:5px; 
color: #d5077£; 
text - decoration:none; 

) 


为 了 让 搜索 和 购物 车 两 个 图 标 水 平 排列 ,设置 float 属性 为 left, 完 整 样式 代码 如 下 。 


# search 一 btn { 
background-color: #d5077£; 
width: 28px; 
height: 28px; 
float: left; 
border: solid 1px # bb0f73; 
border — radius: 4px; 





.nav- cart,.nav- cart af 
margin — left:5px; 
float: left; 
color: #d5077£; 
text - decoration:none; 

} 


最 终 样式 效果 如 图 7-23 所 示 。 
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Hi 7-23 添加 搜索 和 购物 车 图 标 字 体 后 的 效果 


Kill 美化 导航 条 


> 实 训 目的 

熟悉 并 掌握 边框 和 图 标 字体 的 设置 方法 及 技巧 。 

b 实 训 内 容 

利用 前 面 介绍 的 技术 和 方法 ,制作 出 如 图 7-24 所 示 的 效果 。 


这 是 一 个 导航 列表 ,需要 用 到 无 序列 表 制 作 导航 条 的 方法 ; 该 列表 的 外 框 有 圆 角 边框 
效果 ; 每 个 列表 项 前 面 有 一 个 图 标 , 当 鼠标 悬 停 时 ,还 需要 设置 文本 颜色 为 白色 ,背景 色 为 


红色 。 
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图 7-24 美化 导航 条 后 的 效果 


b 实 训 步 又 


L. 设计 思路 分 析 


导航 条 采用 无 序列 表 志 ul 二 制作 。 圆 角 边 框 效果 利用 border-radius 设置 。 列 表 项 前 面 
的 图 标 采用 图 标 字体 (这 里 采用 的 是 Font Awesome 字体 库 ) 的 方法 添加 ,这 样 当 鼠标 悬 停 
时 只 是 修改 文本 颜色 color 即 可 修改 图 标的 颜色 。 


12. 链接 样式 


将 Font Awesome 字体 文件 夹 和 font-awesome. min. css 文件 复制 到 本 项 目 中 ,并 且 在 
一 head 二 内 部 链接 该 样式 ,代码 如 下 。 


< link href = "css/font - awesome. min. css" rel = "stylesheet" type = "text/css" /> 


ls. 输入 代码 


输入 HTML 代码 ,并 添加 相应 图 标 。 


<ul class = "nav"> 
<li><a href =" £ ">< i class ="icon—home"></i> 首页 </a></1i> 
<li><a href =" # ">< i class = "icon-book"></i> 图 书馆 </a></1i> 
<li><a href =" # ">< i class = "icon- pencil"></i> 应 用 </a></1i> 
<li><a href = " £"»« i class = "icon- cogs"></i > 设置 </a></1i> 
</ul> 





B samas d 
L^ 设置 样式 


设置 类 nav 的 样式 ,代码 如 下 。 


„nav { 
border - radius:4px; / * 圆 角 半径 为 4px* / 
list- style- type: none; 
width: 200px; 
background- color: # E3E3E3; 
margin: Opx; 
padding: Opx; 
border: 1px solid # CCC; 


l5 设置 导航 链接 


设置 导航 链接 效果 ,代码 如 下 。 


.nav lia,.nav lia:visited{ 
padding - left:5px; 
height:1.5em; 
line- height:1.5em; 
display:block; 
text - decoration:none; 
font: "微软 雅 黑 "; 
font — size: 16px; 
color: # ££0000; ; 


Ee: 鼠标 悬 停 效 果 


设置 鼠标 悬 停 效果 ,代码 如 下 。 
.nav li a:hover( 
background- color: # £00; 


color: # fff; /* 图 标 和 文字 的 颜色 都 为 白色 * / 
} 


这 样 就 实现 了 如 图 7-24 所 示 的 导航 条 效果 。 
项 目 总 结 


本 项 目 中 介绍 了 美化 页 面 的 常用 方法 ,如 文本 阴影 和 边框 的 设置 ,包括 border-radius, 
border-image 等 ,还 有 制作 视差 效果 的 方法 ,以 及 如 何 利 用 @font-face 和 图 标 字体 装饰 
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页 面 。 


学 好 页 面 美化 技巧 会 为 网 站 页 面 增加 美感 添加 活泼 感 ,会 为 用 户 带 来 很 好 的 客户 
体验 。 


课 后 练习 
1. 利用 图 标 字体 制作 如 图 7-25 所 示 的 列表 。 
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图 7-25 列表 效果 


2. 利用 素材 中 的 coffee. jpg 和 文本 阴影 的 方法 制作 如 图 7-26 所 示 的 效果 。 





图 7-26 文本 阴影 效果 


3. 在 网 上 下 载 合适 的 素材 ,利用 本 项 目 中 介绍 的 方法 制作 具有 视差 效果 的 背景 。 


项 目 8 





一 一 添加 动态 效果 











| 知识 目标 | 

* 了 解 JavaScript jQuery 的 基本 概念 。 
理解 jQuery 选择 器 。 

* 理解 jQuery 中 的 事件 和 动画 。 

| 技能 目标 | 

。 能 够 编写 简单 的 jQuery 代码 。 

* 能 够 掌握 jQuery 插件 的 使 用 方法 。 
* 能 够 编写 常用 动态 效果 。 

| 素养 目标 | 

。 探索 最 优 的 编程 思路 。 

。 培养 团结 协作 的 精神 。 

。 培养 自学 探索 的 习惯 。 


任务 为 页 面 添 加 动态 效果 





b 学 习 情境 


小 黄 在 完成 前 面 介绍 的 任务 后 ,网 页 的 制作 就 接近 尾声 了 ,不 过 接 下 来 他 还 想 为 页 面 添 
加 一 些 动态 效果 ,例如 将 中 间 的 大 图 实现 轮 播 效果 .搜索 框 中 显示 /隐藏 关键 词 .选项 卡 可 以 
切换 等 。 

本 项 目 首先 介绍 JavaScript 和 jQuery 的 基本 含义 ,通过 实例 讲解 其 基本 操作 ,让 大 家 掌 
握 常用 的 动态 效果 制作 方法 。 


b 任务 描述 


在 页 面 头 部 有 一 个 搜索 框 ,该 搜索 框 需要 设置 默认 关键 词 , 当 搜索 框 获得 焦点 ,如 单 击 
搜索 框 时 ,默认 关键 词 消失 ,如 图 8-1 和 图 8-2 所 示 。 
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图 8-1 搜索 框 中 显示 默认 关键 词 
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图 8-2 单 击 搜索 框 后 默认 关键 词 消失 


在 页 面 中 间 区 域 ,需要 有 大 图 轮 播 显 示 , 当 单 击 左下 角 标 签 时 ,中 间 显 示 相 应 的 图 片 信 
息 , 如 图 8-3 所 示 。 
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图 8-3 轮 播 效果 图 


在 产品 单 页 中 , 当 和 鼠标 指针 滑 过 产品 图 片上 时 ,显示 该 图 片 的 大 图 ,出 现 放 大 镜 的 效果 ， 
如 图 8-4 和 图 8-5 所 示 。 

客户 单 击 * 加 入 购物 车 ”按钮 后 ,希望 出 现 提示 窗口 ,提示 用 户 所 要 购买 商品 的 名 称 、 价 
格 、 克 数 和 选 购 数量 ,如 图 8-6 所 示 。 

商品 介绍 的 详情 中 往往 会 出 现 多 个 选项 .如 图 8-7 所 示 , 当 客户 点 击 某 一 选项 卡 ,在 下 
面 内 容 显示 区 域 就 会 出 现 相应 的 信息 , 即 切换 选项 卡 效 果 。 

本 任务 主要 内 容 如 下 。 

(1) 显示 与 取消 搜索 框 默认 关键 词 。 

(2) 设置 图 片 轮 播 。 

(3) 实现 产品 图 片 放大 镜 效 果 。 

(4) 显示 提示 窗口 。 
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图 8-4 鼠标 悬 停 前 图 片 效果 





M&N'SISRETTEDKRUR 
am: 

sm: 5009 

asee 








图 8-5 ”鼠标 悬 停 后 图 片 效 果 


(5) 切换 选项 卡 。 

问题 引导 : 

CD. 图 片 轮 播放 大 镜 效 果 等 是 利用 什么 编程 语言 实现 的 ? 
(2) 该 语言 的 程序 结构 是 什么 ? 如 何 使 用 它 ? 
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图 8-6 弹出 窗口 效果 
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图 8-7 选项 卡 效果 
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b 任务 知识 


l 1. JavaScript 


前 端 开发 工程 师 除 了 需要 掌握 描述 网 页 内 容 的 HTML 和 描述 网 页 样式 的 CSS 之 外 ， 
还 需要 掌握 一 门 技能 , 那 就 是 描述 网 页 行为 的 JavaScript。 

JavaScript 可 以 用 来 改进 网 页 的 设计 ,可 以 让 网 页 和 用 户 之 间 实 现实 时 动态 和 交互 的 
关系 ,使 网 页 可 以 包含 更 多 活跃 的 元 素 和 更 加 精彩 的 内 容 。 它 可 以 用 来 验证 表单 ,检测 浏览 
器 等 。 本 书 中 的 任务 ,如 轮 播 图 片 ,放大镜 效果 .选项 卡 等 都 是 利用 JavaScript 实现 的 。 

JavaScript 是 面向 Web 的 编程 语言 。 目 前 绝 大 多 数 网 站 都 使 用 了 JavaScript, 并 且 目 前 
的 常用 浏览 器 都 包含 了 JavaScript 解释 器 。 

JavaScript 代码 可 以 通过 二 script 之 标签 来 嵌入 HTML 文件 中 。 


<html> 
<head> 
<script type = "text/javascript" src = "js/jquery- 1.11.2. js"></script > 
// 引 入 一 个 JavaScript 库 
</head> 
<body> 
< script type = "text/javascript"> 
/ [5X Ba KA Bl) HTML 文件 中 的 JavaScript 代码 
</script > 
</body> 
</html > 


12. jQuery 


为 了 简化 JavaScript 的 开发 ,一 些 JavaScript 程序 库 就 诞生 了 ,如 Prototype, Dojo, 
jQuery 等 。 

jQuery 是 一 个 由 John Resig 创建 于 2006 4E 1 月 的 开源 项 目 , 目 前 其 团队 主要 包括 核心 
JE UL FALE AN jQuery Mobile 等 开发 人 员 以 及 推广 和 网 站 设计 维护 人 员 。jQuery 语法 简 
洁 , 而 且 有 良好 的 器 平台 的 兼容 性 , 它 可 以 让 用 户 在 DOM 中 移动 、 修 改 页 面 的 外 观 和 动态 
地 修改 页 面 的 内 容 。 

jQuery 强调 的 理念 是 写 得 少 , 做 得 多 。 它 的 优势 主要 有 : 轻 量 级 、 强 大 的 选择 器 、 出 色 
的 DOM 操作 的 封装 .可 靠 的 事件 处 理 机 制 ,完善 的 Ajax、 出 色 的 浏览 器 兼容 性 、 丰 富 的 插件 
支持 等 。 

(1) 获取 和 使 用 jQuery 

jQuery 是 一 个 开源 的 库 文件 ,可 以 在 官方 网 站 http://jquery. com/ 中 下 载 最 新 的 
jQuery 库 文件 ,如 图 8-8 Bros. 
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图 8-8 jQuery 库 下 载 页 面 


jQuery 库 分 为 两 种 ,分 别 是 生产 版 和 开发 版 。 生 产 版 文件 主要 用 于 测试 和 学 习 , 名 称 一 
般 为 jquery.js; 开发 版 文件 主要 应 用 于 产品 和 项 目 , 名 称 一 般 为 jquery. min. js. 

本 书 将 jquery-1. 11. 2.js 放 在 目录 js 下, 当 在 页 面 代码 的 二 head 二 标签 内 引入 jQuery 
PEJA ,就 可 以 使 用 它 了 ,代码 如 下 。 


<html > 
<head> 
<script type = "text/javascript" src = "js/jquery- 1.11.2. js"></script > 
// 引入 jQuery FE 
</head> 
< body> 
</body> 
</html> 


(2) 编写 一 个 简单 的 jQuery 代码 
先 来 看 一 个 简单 的 jQuery 程序 ,代码 如 下 。 


// 省 略 其 他 代码 
<script type = "text/javascript" src = "js/jquery— 1.11.2. js"></script > 
<script type = "text/javascript"> 

$ (document). ready(function() { 

alert(" 欢 迎 来 到 jQuery 世界 !"); 

}) 
</script> 
// 省 略 其 他 代码 








运行 结果 如 图 8-9 所 示 。 





图 8-9 jQuery 弹出 框 实例 


在 jQuery 库 中 ,$ 是 jQuery 的 简写 形式 。 上 面 例子 实现 的 效果 是 等 待 Dom( 文 档 对 象 
模型 ) 元 素 加 载 完 毕 就 出 现 一 个 弹出 框 。 

(3) jQuery 选择 器 

在 jQuery 中 ,对 事件 处 理 . 遍历 DOM 和 Ajax 操作 都 依赖 于 选择 器 , 它 是 jQuery 的 
根基 。 

介绍 jQuery 选择 器 之 前 , 先 回顾 前 面 介绍 的 CSS 选择 器 。CSS 选择 器 有 标签 选择 器 、 
ID 选择 器 ,类 选择 器 、 群 组 选择 器 .后 代 选 择 器 和 通 配 选 择 符 。 

jQuery 选择 器 继承 了 CSS 的 风格 ,利用 jQuery 可 以 便捷 地 找到 特定 的 DOM 元 素 , 然 
后 再 为 它们 添加 相应 的 行为 ,代码 如 下 。 

<p class = "demo"> 点 击 这 里 </p> 

<script type = "text/javascript"> 

$ (". demo"). click(function()( 
alert("This is a jQuery demo! "); 


n 
</script> 


CSS 获取 元 素 的 代码 如 下 。 

. deno{ 

jQuery 获取 元 素 的 代码 如 下 。 
$ (".demo").click(function( ){ 


}) 
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jQuery 和 CSS 选择 器 写法 很 相似 ,但 作用 效果 不 同 ,CSS 选择 器 找到 元 素 后 添加 样式 ， 
而 jQuery 选择 器 找到 元 素 后 添加 行为 。 
jQuery 选择 器 的 主要 类 型 如 表 8-1 所 示 。 


表 8-1 jQuery 选择 器 的 主要 类 型 




















选 择 器 d 述 m A 
基本 选择 器 通过 元 素 id class 和 标签 等 来 查找 DOM 元 素 $(".demo") 
层次 选择 器 通过 DOM 元 素 之 间 的 层次 关系 来 获取 元 素 $ ("div span") 
过 滤 选 择 器 通过 过 滤 规 则 来 筛选 出 所 需 的 DOM 元 素 $("div:first") 
表单 选择 器 获取 表单 的 某 个 或 某 类 型 的 元 素 $(":input ") 


(4) jQuery 中 的 事件 操作 

JavaScript 和 HTML 之 间 的 交互 是 通过 用 户 和 浏览 器 操作 页 面 时 引发 的 事件 来 处 理 
的 。 例 如 当 用 户 点 击 某 个 按钮 会 触发 事件 ,或 者 当 用 户 浏览 器 加 载 完 文档 后 也 会 触发 事件 。 
jQuery 提供 了 更 加 优雅 的 事件 处 理 语法 ,而 且 极 大 地 增强 了 事件 处 理 能 力 。 

例如 ,下 面 的 实例 将 会 触发 类 为 demo 元 素 的 click 事件 。 


<p class = "demo"> 点 击 这 里 </p> 
<script type = "text/javascript"> 
$ (". demo"). click(function() { 
alert("This is a jQuery demo!") ; 
n 


</script> 


如 果 为 某 元 素 绑 定 事件 来 完成 操作 ,可 以 使 用 bind( 方法 ,其 格式 如 下 。 


bind(type [ , data] , £n); 


参数 fn 是 处 理 函 数 。 参 数 data 可 选 ,传递 给 事件 对 象 的 额外 数据 对 象 。 参 数 type 为 
事件 类 型 。 代 码 如 下 。 


$ (". deno") . bind("click", function()( 


alert("This is a jQuery demo! "); 
n 


在 程序 中 经 常会 用 到 click, focus, mouseover 等 事件 ,为 了 简化 操作 ,jQuery 提供 了 一 
套 简写 的 方法 ,例如 上 面 的 代码 可 以 简化 如 下 。 


$ (". demo") . click(function() { 
alert("This is a jQuery demo! "); 
n 


jQuery 支持 的 事件 有 很 多 ,在 这 里 就 不 一 一 详 述 了 。 表 8-2 所 示 为 几 个 常用 事件 及 其 描述 。 
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表 8-2 jQuery 选择 器 常用 事件 及 其 描述 




















*» mg 描述 
click 指定 元 素 的 点 击 事件 
focus() 指定 元 素 的 获取 焦点 事件 
mouseover() 指定 元 素 的 鼠标 悬 停 事 件 
mouseout() 指定 元 素 的 鼠标 离开 事件 
ready() 文档 就 绪 事 件 








(5) jQuery 中 的 动画 效果 

JavaScript 的 魅力 所 在 就 是 其 动画 效果 。 通 过 为 元 素 添 加 动画 效果 ,可 以 增强 页 面 视觉 
感受 ,很 好 地 提高 客户 体验 。 

下 段 代码 中 ,hide( ) 方 法 实现 点 击 元 素 后 隐藏 文本 信息 的 效果 。 


<p class = "demo"> 点 击 这 里 信息 将 会 隐藏 。</p> 
< script type = "text/javascript"> 
$ (". demo"). click(function() { 
$ (this). hide() ; 
n 
</script> 


除了 hide ) 方 法 ,还 有 show() 方 法 ,该 方法 实现 元 素 的 显示 。 利 用 这 两 个 方法 即 可 实 
现 一 个 简单 的 动画 效果 。 


<script type = "text/javascript"> 
$ (function(){ 
$ (". demo"). click(function(){ 
if ( $ (".content").is(":visible")) { 
$ (". content"). hide() ; 
Jelse( 
$ (". content"). show() ; 
) 
}) 
n 
</script> 
</head> 
<body> 
<p class = "demo"> 点 击 这 里 </p> 
<div class = "content"> 这 里 是 详细 信息 。</div> 
</body> 
</html> 


以 上 代码 实现 文字 显示 与 隐藏 效果 。 当 单 击 浏览 器 中 的 文字 “点 击 这 里 ”后 “这 里 是 详 
细 信 息 " 文 字 部 分 会 消失 ,再 次 点 击 文字 “点 击 这 里 ”, 下 面 的 文字 又 会 出 现 。 图 8-10 为 点 击 
前 文字 显示 的 效果 ,图 8-11 为 点 击 后 文字 消失 的 效果 。 
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图 8-10 点 击 前 的 效果 
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点 击 这 里 





图 8-11 点 击 后 的 效果 


(6) jQuery 插件 

插件 是 一 种 遵循 一 定 规范 的 应 用 程序 接口 编写 出 来 的 程序 。jQuery 搬 件 可 以 帮助 用 户 
开发 出 稳定 的 应 用 系统 ,节约 开发 成 本 。 

jQuery 插件 的 下 载 网 址 为 http://plugins. jquery. com/。 

下 面 以 插件 zoom 为 例 介绍 插件 的 引入 方法 。 在 引入 jQuery 库 后 加 入 如 下 代码 。 


<script type = "text/javascript" src = "js/jquery. zoom. min. js"></script > 
接 下 来 就 可 以 调用 zoom 插件 。 
$ (document) . ready(function(){ 

$ ('# exl'). zoom(); 


ni 


这 样 #exl 元 素 就 可 以 实现 插件 zoom 的 放大 镜 效 果 了 。 
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b 任务 实施 


本 次 任务 需要 理解 和 掌握 jQuery 的 基本 知识 ,包括 变量 的 定义 、 选 择 器 的 选 定 、 函 数 的 
调用 、 运 用 的 方法 等 。 下 面 主要 介绍 以 下 功能 的 实现 步骤 : 显示 与 取消 搜索 框 默认 关键 词 、 
选项 卡 切换 ,设置 图 片 轮 播 、 实 现 弹 窗 效 果 和 产品 图 片 放大 镜 。 


I. 显示 与 取消 搜索 框 默认 关键 词 


在 搜索 框 中 需要 显示 ”* 哈 根 达 斯 ”的 默认 关键 词 , 如 图 8-1 所 示 。 当 搜索 框 获得 焦点 后 ， 
则 清空 该 关键 词 ,如 图 8-2 所 示 。 

(1) 添加 搜索 框 并 设置 样式 

首先 添加 搜索 框 代码 。 





< input type = "text" name = "search" id = "search"> 
再 来 设置 其 样式 。 


# search( 
padding: 6px 8px; 
width: 184px; 
font- size: 12px; 
color: : #36332E; 
border: solid lpx #ccc; 
border - radius: 6px; 
float: left; 

} 


(2) 设置 搜索 框 关 键 词 效果 
jQuery 中 的 val() 方 法 可 以 用 来 设置 和 获取 元 素 的 值 。 在 本 例 中 , 先 设置 搜索 框 的 值 为 
“ 哈 根 达 斯 ”为 了 让 其 出 现 浅 灰色 ,为 其 添加 样式 . waiting。 代 码 如 下 。 


.waiting{ 
color: # ccc; 


} 

jQuery 代码 如 下 。 

$ (" & search"). val ("If #8349"). addClass("waiting") ; // 赋 值 ,加 样式 

接 下 来 判断 当 该 元 素 失去 焦点 时 , 值 为 空 的 话 ,就 显示 关键 词 为 “ 哈 根 达 斯 ”, 并 为 其 设 


置 样式 . waiting: 当 该 元 素 获 得 焦点 时 , 值 为 “ 哈 根 达 斯 ”的 话 , 其 值 清 空 , 并 移 除 样式 
. waiting。 下 面 为 完整 的 jQuery 代码 。 


(p 
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$ (function () { 


$ (" # search"). val ("If f i5 fr" ) . addClass("waiting") // 赋 值 ,加 样式 
.blur(function () { // 失 去 焦点 时 
if ($ (this).val() == "") { // 判 断 是 否 为 空 
$ ("# search"). val(" 哈 根 达 斯 ").addclass("waiting"); ”// 赋 值 ,加 样式 
} 
n 
. focus(function () { // 获 得 焦点 时 
证 ($("#search").val() == " 哈 根 达 斯 ") ( // 判 断 是 否 为 “ 哈 根 达 斯 ” 
$ ("# search"). val(""). removeClass("waiting") ; // 赋 值 ,加 样式 
} 
ni 


n; 


至 此 ,搜索 框 默认 关键 词 的 显示 与 取消 效果 就 实现 了 。 


B 设置 图 片 轮 播 


首页 中 间 区 域 有 一 个 大 图 轮 播 效果 ,在 大 图 左下 角 有 相应 活动 的 文字 介绍 ,如 图 8-3 所 
示 , 当 其 获得 焦点 时 , 轮 播 区 域 显示 相关 图 片 。 

(1) 添加 HTML 内 容 并 设置 样式 

这 里 有 两 张 轮 播 图 片 ,左下 方 有 两 个 文字 介绍 ,HTML 代码 如 下 所 示 。 


<div class = "banner center"> 
<a href="#" id="JS_imgWrap"> 
< ing src = "imgs/banner. png" alt = "成 为 会 员 优惠 更 多 "> 
< ing src = "imgs/banner2.png" alt = "春季 热 销 产品 "> 
</a> 
<div> 
<ahref="+ £ #1"> 
< em> 成 为 会 员 </em>< em> 优 惠 更 多 </em> 
</a> 
<ahref ="# # #2"> 
< em > 春季 热 销 </em>< em> 全 场 优惠 </em> 
</a> 
</div> 
</div> 


下 面 CSS 代码 为 其 样式 。 


. banner( / * VERE banner 的 属性 * / 
width: 1160px; 
height: 395px; 
position: relative; 
overflow: hidden; 
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. banner img{ 
position: absolute; 
left: 0; 
top: 0; 

} 

. banner div{ 
bottom: 0; 
overflow: hidden; 
position: absolute; 
float: left; 

} 

. banner div af 


background-color: #666; 


color: # fff; 


display: inline- block; 


float: left; 
height: 32px; 
margin- right: 1px; 
overflow: hidden; 
padding: 5px 15px; 


text- align: center; 


width: 79px; 

} 

. banner div a em{ 
cursor: pointer; 
display: block; 
height: 16px; 
overflow: hidden; 
width: 79px; 


(2) 设置 图 片 切换 效果 


/ * 和 position: absolute 结合 让 其 处 在 左下 方 */ 


/* 让 文字 水 平 排列 */ 


先 设置 当 光 标 滑 过 文字 1 时 ,显示 第 一 张 图 片 ; 当 光 标 滑 过 文字 2 时 ,显示 第 二 张 图 片 ， 


代码 如 下 。 


$ (function() { 


var $ imgrolls = $ (".banner div a"); 


var index = 0; 


$ imgrolls. mouseover(function() { 
index = $ imgrolls. index(this) ; 


showIng( index); 
)). ea(0) . nouseover() ; 


n 


index 表示 当前 要 显示 图 片 的 索引 。. eq(0). mouseover() 用 来 初始 化 显示 第 一 个 图 片 。 


再 来 设置 showImg O PR, 
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function showImg( index) { 
var $ rollobj= $ (". banner"); 
var $ rolllist = $ rollobj. find("div a"); 
var newhref = $ rolllist. eq( index). attr("href") ; 
$ ("#JS_imgWrap"). attr("href",newhref) 
. find(" img"). eq( index) . stop(true, true). fadeIn() 
. Ssiblings(). fadeOut() ; 
$ rolllist. removeClass("chos") . css("opacity", "0. 7") 
. eq( index) . addClass("chos"). css("opacity","1"); 
} 


$ rolllist. eq(index). attr("href") 代 码 获 取 当 前 滑 过 链接 的 href 值 ,然后 将 其 赋值 给 大 
图 的 超 链接 目标 。 根 据 传 人 的 index 参数 来 显示 相应 的 图 片 , 并 且 隐 藏 相 邻 的 图 片 。 同 时 
取消 和 添加 样式 . chos ,代码 如 下 。 


. banner a. chos{ 
background - color: #000000; 
color: #fff; 

} 


接 下 来 设置 大 图 自动 轮 播 效果 。 


var len = $ imgrolls. length; 

var index = 0; 

var adTimer = null; 

$ ('. banner"). hover(function(){ 
if(adTimer) { 

clearInterval(adTimer) ; 

} 

}, function()( 
adTimer = setInterval(function()( 


index++; 
if (index == len) { index = 0; } 
ShowImg( index) ; 

}, 5000) ; 


}). trigger("mouseleave" ) ; 


以 上 代码 实现 图 片 没有 鼠标 滑 和 人 滑 出 时 ,每 隔 5 秒 切换 一 次 图 片 。showImg(index) 用 
来 显示 大 图 ,每 调用 一 次 ,index 自动 加 1。 如 果 index 的 值 与 图 片 数量 相等 ,将 index 值 设 
置 为 0, 重 新 开始 轮 播 显示 图 片 。 设 置 图 片 轮 播 的 完整 代码 如 下 。 





$ (function(){ 
var $ imgrolls = $ (".banner div a"); 
$ ingrolls.css("opacity","0.7"); 
var len = $ imgrolls. length; 








var index = 0; 

var adTimer = null; 

$ imgrolls. mouseover(function() { 
index = $ imgrolls. index(this) ; 
showIng( index); 

}). ea(0) . mouseover( ) ; 

// 滑 人 停止 动画 , 滑 出 开始 动画 。 

$ ('.banner'). hover(function(){ 
if(adTimer)( 

clearInterval(adTimer); 


) 
}, function() { 
adTimer = set Interval (function(){ 
indexe*; 
if (index == len) { index = 0; } 
showIng( index); 
),5000); 


}). trigger("nouseleave"); 
n 
// 显 示 不 同 的 幻灯 片 
function showImg( index){ 
var $ rollobj= $ (".banner"); 
var $ rolllist = $ rollobj.find("div a"); 
var newhref = $ rolllist. eq( index). attr("href") ; 
$ ("#JS_imgWrap"). attr("href", newhref) 
. find(" img"). eq( index) . stop(true, true). fadeIn( ) 
. siblings(). fadeOut() ; 
$ rolllist. removeClass("chos") . css("opacity" , "0. 7") 
.eq( index) . addClass("chos").css("opacity","1"); 
$ 


最 终 便 实 现 了 当 鼠 标 指针 滑 人 缩 略图 时 ,大 图 区 域 显示 相应 的 图 像 ; 不 滑 和 人 时 ,大 图 每 
5 秒 切换 一 次 。 


1:. 产品 图 片 放大 镜 


本 节 实现 图 片 放 大 镜 效 果 。 图 8-4 所 示 为 鼠标 指针 滑 和 人 前 产品 图 片 效果 , 当 鼠 标 指针 
滑 人 时 显示 产品 大 图 ,如 图 8-5 所 示 。 

(1) 添加 HTML 内 容 

设置 该 图 片 大 小 宽 为 450px, 高 为 450px. 代 码 如 下 。 


<div id= 'ex1 > 
< img src = "imgs/mm_big. png" width= "450px" 
height = "450px" alt = "M&amp;M'S 巧克力 豆 冰激凌 "> 


</div> 
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(2) 引入 并 使 用 插件 
http://plugins. jquery. com/ 中 有 多 种 插件 可 供 下 载 ,这 里 下 载 的 是 zoom 插件 。 首 先 
引入 该 插件 ,代码 如 下 。 


<script type = "text/javascript" src = "js/jquery- 1.11.2. js"></script> 
<script type = "text/javascript" src = "js/jquery. zoom. min. js"></script > 


使 用 该 插件 很 简单 ,直接 调用 zoom() 即 可 。 


$ (document) . ready(function()( 
$ ('# ex1'). zoom() ; 
ni 


这 样 ,产品 图 片 放 大 镜 效 果 就 快速 实现 了 ,如 图 8-5 所 示 。 关 于 该 插件 具体 的 代码 结构 
就 不 详 述 ,在 jquery. zoom. min. js 文件 中 可 以 查看 具体 内 容 。 


[^4 显示 提示 窗口 


当 用 户 在 选择 好 商品 ,设置 好 购买 数量 ,点 击 购买 时 ,希望 出 现 一 个 提示 窗口 ,确认 用 户 
的 购买 信息 ,如 购买 商品 名 称 、 数 量 ,价格 等 信息 。 

(1) 添加 HTML 内 容 

提示 窗口 信息 包含 商品 名 称 、 数 量 、 价 格 、 克 数 ,在 HTML 代码 中 分 别 将 它们 命名 为 
goodsTitle, number, price 和 weight, 代 码 如 下 。 


<div class = "goodsInfo"> 
« p class = "goodsTitle"> M&anp;M'S 巧克力 豆 冰激凌 </p> 
<p class = "price"> 价 格 : 127.58 元 </p> 
<p class = "weight"> 克 数 : 500g </p> 
<p class = "number"> 选 购 数量 : < input class = "numinput" type = "text" value= "1" min = 
"o" /></p> 
<div class = "product — btn"> 
<a href =" 井 "> 购买 </a> 
</div> 
</div> 


(2) 设置 样式 
设置 CSS 样式 ,效果 如 图 8-6 所 示 ,代码 如 下 。 


. goodsInfo( 
width: 480px; 
float: right; 
clear: right; 








. goodsTitle{ 
font — weight: bold; 
font- size: 20px; 
padding: 10px 0px; 
} 
. price, . weight, . number{ 
border - top:solid 1px # e0e0e0; 
padding: 10px Opx; 


} 

- numinput{ 
width: 3em; 
border: solid 1px + e0e0e0; 
text-align: center; 
margin: 5px 20px; 

} 


. goodsInfo . product - btn{ 
margin- left: Opx; 

) 

. product — btn{ 
width: 258px; 
margin: 10px; 
overflow: hidden; 

} 

. product — btn a( 
background-color: #333333; 
width: 258px; 
height: 40px; 
text- align: center; 
line-height: 40px; 
color: #ffffff; 
display: block; 

} 

. product — btn a: hover{ 
background-color: #444444; 


(3) 设置 提示 效果 
先 定义 提示 的 信息 ,再 利用 alert() 弹 出 。return false 的 作用 是 避免 页 面 跳 转 。 完 整 代 
码 如 下 。 














$ (function()( 
$ (". goodsInfo . product - btn a"). click(function() { 
var pro name = $ (".goodsTitle").text(); 
var pro price = $ (".price").text(); 
var pro weight - $ (".weight").text(); 
var pro num = $ (".numinput").val(); 


B samas | 





var dialog = "感谢 您 的 购买 。\n 您 购买 的 \n" + 
"产品 是 : "+ pro_name+";\n"+ 
pro pricet+ ";\n" + 
pro weight +";\n" + 
"数量 是 : "+ pro_num; 

alert(dialog) ; 

return false; 

n 
}) 


至 此 ,点 击 购买 后 ,相应 提示 窗口 就 出 现 了 。 


[5 选项 卡 切 换 


当 用 户 单 击 某 选项 卡 标 签 时 ,内 容 介绍 区 域 出 现 相应 内 容 ,如 图 8-7 所 示 。 这 里 需要 通 
过 显示 与 隐藏 来 切换 不 同 的 内 容 。 

(1) 添加 HTML 元 素 

本 例 中 有 “商品 展示 “商品 参数 ”和 “品质 保障 ”三 个 选项 卡 , 默 认 情 况 下 让 第 一 个 选项 
卡 处 在 选中 状态 ,设置 其 为 类 selected。 三 个 选项 卡 的 相关 内 容 放 在 三 个 DIV 容器 中 , 父 元 
素 为 类 tab_box 的 DIV ,代码 如 下 。 


<div class = "tab"> 
<div class = "tab_menu"> 
<ul> 
< li class = "selected"> 商 品 展示 </1i> 
<1i> 商 品 参数 </1i> 
<1i> 品 质保 障 </1i> 
</ul> 
</div> 
<div class = "tab box"> 
<div >< img src = "imgs/1. png"></div> 
<div> 
<p> 产 品 参数 : </p> 
<p> 厂 名 : 美国 </p> 
«pol hk: 美国 </p> 
<p> 厂 家 联系 方式 : 123456789 </p> 
<p> 配 料 表 : 奶油 ,水 、 白 砂糖 .玉米 糖浆 .脱脂 牛奶 .蛋黄 ,椰子 油 .黄油 、 碳 酸 氢 钠 、 食 用 
盐 </p> 
<p> 储 藏 方法 : 零下 20T 储存 ”保质 期 : 365 天 </p> 
<p> 食 品 添加 剂 : MARAE .卡拉 胶 、 天 然 食用 香料 </p> 
<p> 包 装 方式 : 散装 </p> 
<p> 糕 点 种 类 : 冰激凌 </p> 
<p> 重 量 (g): 533 </p> 
<p> 品 牌 : M&M’S </p> 
<p> 系 列 : 两 杯 装 </p> 





<p> 产 地 : 美国 </p> 
</div> 
<div>< img src - "imgs/2. jpg"></div> 
</div> 
</div> 





再 来 设置 其 CSS 样式 。 整 个 选项 卡 宽度 为 1160px。 选 项 卡 水 平 排列 ,每 个 选项 卡 的 
上 , 左 、 右 边框 都 为 1px 的 实 线 ,颜色 为 #414141。 选 中 的 selected 样式 为 红色 背景 ,白色 文 





字 效 果 。 下 面 为 其 CSS 样式 代码 。 


.tab{ 
width: 1160px; 
margin- top: 20px; 


} 
.tab menu ul{ 
list- style- type: none; 
} 
.tab menu ul li( 
float: left; 
border - top:solid 1px # 414141; 
border - left:solid 1px #414141; 
border - right:solid 1px #414141; 
width: 6em; 
height: 1.5em; 
line- height: 1.5em; 
text- align: center; 
margin- right: 5px; 
) 
.tab box( 
clear: left; 
width: 1160px; 
padding - top: 20px; 
border - top: solid 1px #414141; 
) 
. selected( 
background-color: # BBOF73; 
color: #fff; 
} 


(2) 设置 选项 卡 切换 效果 


首先 为 Ti 元 素 绑 定 事件 ,这 里 用 click() ,代码 如 下 。 





var $div_li= $ ("div.tab menu ul li"); 
$ div li.click(function()[( 

// 绑 定单 击 事件 
ni 
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绑 定 事 件 后 ,需要 将 当前 的 下 元素 红 底 白 字 效 果 显示 ,同时 要 去 掉 其 他 同辈 的 . selected 
效果 ,代码 如 下 。 


var $div_li= $ ("div.tab menu ul 1i"); 
$ div 1i.click(function(){ 

$ (this).addClass("selected").siblings(). removeClass("selected"); 
ni 


接 下 来 设置 与 选项 卡 对 应 的 内 容 的 显示 与 隐藏 效果 。 从 前 面 的 结构 中 可 以 知道 ,每 个 
选项 卡 对 应 一 个 DIV, 即 相应 的 内 容 。 所 以 可 以 根据 当前 单 击 的 列表 元 素 的 索引 来 显示 对 
应 的 DIV 。 


var index = $div li.index(this); 
$ ("div.tab box» div"). eq( index). show(). siblings().hide(); 


如 果 和 希望 添加 鼠标 滑 和 人 滑 出 效果 ,可 以 增加 CSS 样式 ,代码 如 下 。 


. hover{ 
background-color: # e0e0e0; 
} 


再 利用 addClassO il removeClass() 来 添加 和 去 除 鼠 标 悬 停 效 果 ,完整 代码 如 下 。 


$ (function(){ 
var $div_li= $ ("div. tab_menu ul 1i"); 
$ div li.click(function()( 
$ (this). addClass("selected").siblings().removeClass("selected"); 
var index = $div li.index(this); 
$ ("div.tab box» div"). eq( index). show(). siblings(). hide(); 
}). hover(function()( 
$ (this). addClass("hover") ; 
}, function()( 
$ (this). removeClass("hover") ; 
ni 
n 


这 样 , 图 8-7 所 示 的 选项 卡 切换 效果 就 实现 了 。 


EIMNZITIIBEB 显示 隐藏 菜单 


> SAK 
熟悉 选择 器 的 使 用 ,掌握 showO 、hide() 等 方法 的 使 用 。 
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> 实 训 内 容 


制作 一 个 显示 与 隐藏 菜单 的 效果 。 当 用 户 进入 界面 时 ,品牌 列表 是 精简 模式 ,按钮 文字 
为 “显示 全 部 品牌 ”, 如 图 8-12 所 示 。 当 用 户 单 击 “显示 全 部 品牌 按钮 后 ,品牌 菜单 全 部 显 
示 , 同 时 按钮 文字 变 成 “精简 显示 品牌 ”, 如 图 8-13 所 示 。 
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显示 全 部 品牌 





图 8-12 进入 页 面 效 果 
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图 8-13 单 击 按钮 后 的 效果 
b KIER 
L. 设计 思路 分 析 


首先 需要 隐藏 第 七 条 后 面 的 品牌 ,最 后 一 条 “其 他 品牌 冰激凌 "除外 。 当 触发 按钮 的 
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click 事件 时 需要 来 判断 : 如 果品 牌 全 部 显示 ,就 隐藏 多 余 的 品牌 ,并 且 设 置 按钮 文字 为 “ 显 
示 全 部 品牌 ”>; 否则 显示 相应 品牌 ,并且 设置 按钮 文字 为 “精简 显示 品牌 ”。 


12. 输入 HTML 代码 


输入 HTML 代码 如 下 。 


<div class = "listBox"> 

<ul> 
<li><a href ="#"> 本 - 杰 瑞 </a></1i> 
<li><a href ="#"> 哈 根 达 斯 </a></1i> 
<li><a href ="#">M&amp;M'S</a></li> 
<li><a href ="#">f8¥</a></li> 
<li><a href ="#"> 水 晶 </a></1i> 
<1i><ahref="#"> 布 里 斯 </a></1i> 
<li><a href="#">+ J]ic/a»«/1i» 
<li><a href ="#">fGmtt</a></li> 
<li><a href ="#">$#4</a></li> 
<li><a href ="#">fftfil</a></li> 
<li><a href="#"># fi</a></li> 
<li><a href ="#">DQ</a></li> 
<li><a href ="#"> 和 路 雪 </a></1i> 
<li><a href ="#"> 格 林 奥 </a></1i> 
<li><a href="# 心 其 他 品牌 冰激凌 </a></1i> 

</ul> 

<div class = "showmore"> 
<a href = " # ">< span> 显 示 全 部 品牌 </span></a> 

</div> 

</div> 


ls. 设置 CSS 样式 


CSS 样式 代码 如 下 。 


| 
padding: 0; 
margin: 0; 
) 
.listBox( 


margin - top: 20px; 

border: solid 1px #909090; 
padding: 0.5em 2em; 
margin- left: auto; 
margin- right: auto; 

width: 500px; 

text- align: center; 








overflow: hidden; 

} 

. ListBox ul { 
list- style- type: none; 

} 

. ListBox ul li( 
float: left; 
width: 7em; 
margin: 5px 20px; 

} 

. ListBox a, . listBox a: visited{ 
color: #404040; 
text — decoration: none; 
display: block; 

} 

. showmore{ 
width: 8em; 
line- height: 2em; 
text - align: center; 
margin- top: 3em; 
border:solid 1px #909090; 
clear: both; 
margin- left: auto; 
margin- right: auto; 

} 

. showmore a:hover{ 
background-color: #232323; 
color: # fff; 


l^ 设置 显示 与 隐藏 菜单 的 代码 


最 后 ,设置 显示 与 隐藏 菜单 的 代码 如 下 。 


$ (function()( 
var $ category = $ ("ul li:gt(5):not(:last)"); 
$ category. hide() ; // 隐 藏 上 面 获取 的 jQuery 对 象 
var $toggleBtn = $ ("div.showmore- a"); 
$ toggleBtn. click(function( ) { 
if ( $ category. is(":visible")) { 
$ category. hide() ; 
$ (this). find("span").text(" 显 示 全 部 品牌 "); 
Jelse( 
$ category. show() ; 
$ (this). find("span").text(" 精 简 显 示 品 牌 "); 
} 
return false; 
H; 
n; 
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项 目 总 结 


本 项 目 介绍 了 JavaScript 的 基本 概念 ,以 jQuery 为 例 介绍 其 基本 编程 方法 ,通过 显示 与 
隐藏 搜索 框 默 认 关 键 词 . 选 项 卡 切 换 、. 设 置 图 片 轮 播 、 实 现 弹 窗 效果 .产品 图 片 放 大 镜 和 显示 
与 隐藏 菜单 实例 ,来 介绍 网 页 中 常用 动态 效果 的 制作 思路 和 方法 。 


课 后 练习 


1. 制作 一 个 按钮 , 单 击 该 按钮 后 按钮 隐藏 。 
2. 制作 一 个 按钮 , 单 击 该 按钮 后 按钮 渐渐 淡出 。 
3. 单 击 按钮 后 ,段落 部 分 显示 文字 “欢迎 学 习 JavaScript!”, 如 图 8-14 和 图 8-15 所 示 。 


这 里 是 标题 
这 里 是 一 个 段落 


这 里 是 另 一 个 段落 
请 点 击 这 里 








图 8-14 单 击 按钮 前 的 效果 





这 里 是 标题 
欢迎 学 习 JavaScript! 
欢迎 学 习 JavaScript! 








图 8-15 单 击 按钮 后 的 效果 


4. 设置 4 张 图 片 轮 播 ,间隔 为 5 秒 , 当 鼠标 悬 停 在 图 片上 时 , 轮 播 效果 终止 。 
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一 一 响应 式 布局 








| 知识 目标 | 

* 理解 响应 式 布局 的 概念 。 

。 了 解 viewport。 

。 理解 媒体 查询 的 含义 。 

。 了 解 媒体 查询 的 属性 。 

| 技能 目标 | 

”掌握 响应 式 布 局 的 基本 设置 方法 。 
* 掌握 响应 式 图 片 的 制作 方法 。 
”能 够 为 移动 设备 优化 显示 页 面 内 容 。 
* 能够 设置 响应 式 导 航 菜单 。 

| 素养 目标 | 

。 掌握 响应 式 布局 的 设计 思路 。 

。 探索 一 种 效果 的 多 种 实现 方法 。 
+ 培养 团结 协作 的 精神 。 

。 探 索 解决 浏览 器 不 兼容 的 问题 。 


任务 ”对 页 面 添加 响应 式 布局 


> 学 习 情 境 

现在 使 用 移动 终端 的 用 户 越 来 越 多 ,小 黄 发 现 之 前 设计 的 网 页 在 大 屏幕 显示 器 显示 效 
果 良 好 ,但 是 在 小 屏幕 显示 器 如 手机 等 设备 上 ,网 页 的 显示 效果 就 不 那么 美观 了 ,会 让 用 户 
产生 很 糟糕 的 体验 。 

下 面 介绍 响应 式 布局 的 方法 ,将 页 面 优化 ,使 得 页 面 能 够 自 适应 屏幕 的 大 小 采取 不 同 的 
显示 方式 ,也 就 是 让 它 能 够 兼容 多 种 终端 。 


b 任务 描述 


页 面 内 容 需 要 在 不 同 分 辩 率 显示 器 上 显示 不 同 的 效果 。 在 浏览 器 的 可 视 区 域 宽 度 大 于 
980px 时 ,效果 如 图 9-1 所 示 ,在 小 于 650px 宽度 时 ,产品 由 原来 三 列 变 为 两 列 ,图 片 自动 缩 
小 ,效果 如 图 9-2 所 示 ; 浏览 器 的 可 视 区 域 宽度 介 于 两 者 之 间 时 ,产品 信息 依然 是 两 列 , 不 过 
图 片 进 一 步 缩 小 ,效果 如 图 9-3 所 示 。 

希望 导航 菜单 在 电脑 上 打开 后 显示 效果 如 图 9-4 所 示 ,水 平 排列 。 在 手机 (或 小 屏幕 设 
备 ) 上 显示 如 图 9-5 所 示 的 精简 样式 ; 当 点 击 Menu 或 右边 的 符号 后 ,出 现 如 图 9-6 所 示 的 菜 
单 效果 。 
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图 9-2 hF 650px 宽度 时 的 效果 
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图 9-3 大 于 650px 小 于 980px 宽度 时 的 效果 


本 任务 主要 内 容 如 下 。 

(1) 优化 移动 设备 显示 页 面 内 容 。 
(2) 移动 设备 上 显示 菜单 。 

问题 引导 : 

CD 什么 是 响应 式 布局 ? 

(2) 通过 什么 来 实现 响应 式 布局 的 ? 
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图 9-4 宽屏 效果 
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图 9-5 精简 效果 
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图 9-6 精简 模式 下 拉 菜单 效果 
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> 任务 知识 


I. 响应 式 布局 的 概念 


现在 移动 终端 用 户 越 来 越 多 ,不 过 ,很 多 网 页 并 没有 针对 移动 设备 进行 优化 。 为 解决 如 
今 各 式 各 样 的 浏览 器 分 辩 率 以 及 不 同 移动 设备 的 显示 效果 ,设计 师 提 出 了 响应 式 布局 的 设 
计 方 案 。 

响应 式 布局 (这 一 概念 最 初 是 由 Ethan Marcotte TE A List Apart 中 提出 的 ) 响 应 了 用 
户 及 其 所 用 设备 的 需求 。 版 式 会 根据 设备 的 大 小 和 功能 而 变化 。 例 如 ,手机 可 能 会 以 单列 
视图 的 形式 呈现 内 容 , 而 同样 的 内 容 可 能 会 以 双 列 的 形式 呈现 在 平板 电脑 上 。 

响应 式 布局 的 优点 有 : 面 对 不 同 分 辨 率 设备 灵活 性 强 , 能 够 快捷 解决 多 设备 显示 适应 
问题 。 同 时 , 它 也 有 自身 的 缺陷 ,如 兼容 各 种 设备 工作 量 大 ,效率 低下 ,代码 累 歼 ,会 出 现 隐 
藏 某 些 元 素 ,加 载 时 间 加 长 等 。 

不 过 , 随 着 目前 大 屏幕 移动 设备 的 普及 ,响应 式 布局 成 为 前 端 设计 者 必修 的 一 课 。 


12. 设置 viewport 


为 了 提供 最 佳 体验 ,移动 浏览 器 会 以 桌面 设备 的 屏幕 宽度 (通常 大 约 为 980px, 但 不 同 
设备 可 能 会 有 所 不 同 ) 来 呈现 网 页 ,然后 再 调整 字体 大 小 并 将 内 容 调整 为 适合 屏幕 的 大 小 ， 
从 而 改善 内 容 的 呈现 效果 。 对 用 户 来 说 ,这 就 意味 着 ,字体 大 小 可 能 会 不 一 致 ,用 户 必 须 点 
按 两 次 或 张 合 手指 进行 缩放 ,才能 查看 内 容 并 与 之 互动 。 

响应 式 布局 就 可 以 解决 这 一 问题 。 对 于 针对 各 种 设备 优化 过 的 网 页 ,其 文档 头 部 必须 
包含 viewport 视 口 元 素 。 视 口 代码 会 指示 浏览 器 如 何 对 网 页 尺寸 和 缩放 比例 进行 控制 。 在 
开发 时 ,把 下 面 的 代码 复制 到 二 head 二 标签 中 。 





<meta name = "viewport" content = "width = device - width, initial- scale=1.0"> 


width 一 device-width 表示 宽度 即 为 设备 屏幕 的 宽度 。 这 样 一 来 ,网 页 便 可 以 重 排 内 容 ， 
使 之 适合 不 同 的 屏幕 大 小 。 有 些 浏览 器 会 在 旋转 到 横向 模式 时 保持 固定 的 网 页 宽度 ,然后 
通过 缩放 (而 不 是 重 排 ) 填 满 屏 幕 。 添 加 属性 initial-scale 一 1. 0 会 让 浏览 器 在 不 考虑 设备 方 
向 的 情况 下 ,指示 浏览 器 将 网 页 与 屏幕 宽度 的 比例 设 为 1 : 1, 允 许 网 页 完全 占用 横向 宽度 。 


E CSS 中 的 Media Query( 媒 体 查 询 ) 


媒体 查询 是 可 应 用 于 CSS 样式 的 简单 过 滤器 。 有 了 这 些 过 滤器 ,可 以 根据 设备 呈现 内 
容 的 特点 轻松 更 改 样式 ,包括 显示 屏 类 型 .宽度 .高度 ,方向 ,甚至 是 分 辩 率 。 
例如 ,可 以 将 打印 必需 的 所 有 样式 放 在 打印 媒体 查询 中 ,代码 如 下 。 





« link rel = "stylesheet" href = "print.css" media = "print"> 
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除了 在 样式 表 链 接 中 使 用 media 属性 之 外 ,还 可 以 通过 另外 两 种 方法 应 用 可 以 嵌入 
CSS 文件 的 媒体 查询 : @media 和 @import。 出 于 性 能 方面 的 考虑 ,建议 开发 者 优先 考虑 使 
用 前 两 种 方法 ,尽量 避免 使 用 @import 语法 。 


(media print { 


) 
@import url(print.css) print; 


自 适应 网 页 设计 最 常 使 用 的 项 目 为 min-width, max-width, min-height 和 max-height, 
表 9-1 为 媒体 查询 属性 及 结果 。 


Rol 媒体 查询 属性 及 结果 























属 性 结 m 
min-width 当 任 意 浏览 器 宽度 大 于 查询 中 定义 的 值 时 适用 的 规则 
max-width 当 任意 浏览 器 宽度 小 于 查询 中 定义 的 值 时 适用 的 规则 
min-height 当 任意 浏览 器 高 度 大 于 查询 中 定义 的 值 时 适用 的 规则 
max-height 当 任 意 浏览 器 高 度 小 于 查询 中 定义 的 值 时 适用 的 规则 
orientation= portrait 高 度 大 于 或 等 于 宽度 的 任意 浏览 器 适用 的 规则 
orientation= landscape 宽度 大 于 高 度 的 任意 浏览 器 适用 的 规则 
代码 如 下 。 


< link rel = "stylesheet" media = "(max— width: 640px)" href = "max— 640px. css"> 
< link rel = "stylesheet" media = "(min- width: 640px)" href = "min - 640px. css"> 
< link rel = "stylesheet" media = " (orientation: portrait)" href = "portrait.css"> 
< link rel = "stylesheet" media = "(orientation: landscape)" href = "landscape. css"> 
<style> 
@media (min - width: 500px) and (max— width: 600px) { 
hi { 
color: fuchsia; 
} 
.desc:after { 
content :" In fact, it's between 500px and 600px wide. "; 
} 
} 
</style> 


根据 上 段 代 码 ,不 同 宽度 的 浏览 器 会 采用 不 同 的 样式 。 

CD 当 浏 览 器 宽度 介 于 0 一 640px 之 间 时 ,系统 将 会 应 用 max-640px. css, 
(2) 当 浏 览 器 宽度 介 于 500 一 600px 之 间 时 ,系统 将 会 应 用 @media。 

(3) 当 浏 览 器 宽度 为 640px 或 大 于 此 值 时 ,系统 将 会 应 用 min-640px. css. 
(4) 当 浏览 器 宽度 大 于 高 度 时 ,系统 将 会 应 用 landscape. css。 

G) 当 浏览 器 高 度 大 于 宽度 时 ,系统 将 会 应 用 portrait. css. 
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例如 ,设置 一 个 自 适应 式 的 导航 菜单 , 当 浏览 器 宽度 大 于 等 于 640px 时 ,水 平 排列 ; 当 
浏览 器 宽度 小 于 640 宽度 时 垂直 排列 。HTML 代码 如 下 。 


<div class = "nav"> 
<ul> 
<li><a href =" £"» fi Ji«/a»«/li» 
<1i><ahref="#"> 新 品 速递 </a></1i> 
<1i><ahref="#"> 热 卖 推荐 </a></1i> 
<li><a href = " # "Ñ m4 %</a></li> 
<li><a href =" # ">m PM B</a></li> 
<li><a href ="#"> 会 员 活 动 </a></1i> 
</ul> 
</div> 


在 二 head 二 标签 中 添加 metal viewport 代码 和 引入 的 样式 文件 ,代码 如 下 。 


< link rel = "stylesheet" type = "text/css" href = "css/resmenu. css"> 
<meta name = "viewport" content = "width = device - width, initial- scale=1, maximum - scale = 
1, user - scalable = no"/> 


以 下 为 CSS 样式 代码 。 


*{ 
margin: 0; 
padding: 0; 
} 
body( 
font- family: "微软 雅 黑 "; 
font- size: 14px; 
color: t 36332e; 
background-color: &f4f4f4; 
) 
a,a:visited( 
color: #36332e; 
text - decoration: none; 
) 
a:hover{ 
color: # BBOF73; 
} 
.nav ul( 
list- style- type: none; 
) 
.nav (width: 100% ; margin:0 auto; } 
/* 当 浏 览 器 的 可 视 区 域 宽度 大 于 650px ,导航 菜单 水 平 排列 * / 
@media screen and (min- width: 650px) { 
.nav ul li (float: left;margin: 0 2em;} 
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当 浏 览 器 宽度 大 于 或 等 于 650px 时 ,导航 样式 效果 如 图 9-7 所 示 。 


mam 
§ fleyW/Dysresmenuhtml z rietna z 
首页 rama enes 





图 9-7 浏览 器 宽度 大 于 或 等 于 650px 时 的 效果 


当 浏览 器 宽度 小 于 650px 时 ,导航 样式 效果 如 图 9-8 所 示 。 
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图 9-8 浏览 器 宽度 小 于 650px 时 的 效果 


JavaScript 也 是 设计 响应 式 布 局 的 有 力 工 具 之 一 。 特 别 是 当 某 些 旧 设 备 无 法 完美 支持 
CSS 的 媒体 查询 时 , 它 可 以 作为 后 备 支援 。 


b 任务 实施 
小 黄 需要 利用 响应 式 布局 方法 ,优化 页 面 内 容 并 制作 响应 式 菜单 。 


| 1. 优化 移动 设备 显示 页 面 内 容 


优化 前 面 制作 的 首页 页 面 , 要 求 在 不 同 宽度 显示 器 上 显示 不 同 的 效果 。 在 浏览 器 的 可 
视 区 域 宽度 大 于 980px 时 ,效果 如 图 9-1 所 示 ; 在 小 于 650px 时 ,产品 列表 由 原来 三 列 变 为 
两 列 , 图 片 自动 缩小 ,效果 如 图 9-2 所 示 。 当 浏览 器 的 可 视 区 域 宽度 介 于 两 者 之 间 时 ,产品 
列表 依然 是 两 列 , 不 过 图 片 进一步 缩小 ,效果 如 图 9-3 所 示 。 

(1) 添加 导航 列表 的 内 容 

下 面 对 冰 天 美 帝 首页 的 页 面 进行 优化 ,HTML 内 容 还 是 采用 之 前 的 结构 ,代码 如 下 。 


—e 








<div class = "container"> 
<! -一 首页 banner -一 > 
<div class = "banner center"> 
<a href ="#" id= "JS_imgWrap"> 
< img src = "imgs/banner. png" alt = "成 为 会 员 优惠 更 多 "> 
< img src = "imgs/banner2. png" alt = "春季 热 销 产 品 "> 
</a> 
<div> 
<ahref="# # #1"> 
< em> 成 为 会 员 </em>< em> 优 惠 更 多 </em> 
</a> 
<ahref=" 提 划 划 2"> 
< em> 春 季 热 销 </em>< em> 全 场 优惠 </em> 
</a> 
</div> 
</div> 
<! -首页 主体 --> 
<div class = "main center"> 
<! 一 产品 列表 区 域 --> 
< div class = "product - area"> 
<ul> 
<li> 
<div class = "product - photo"> 
<ahref="#"> 
< img src = "imgs/mm. png"> 
</a> 
</div> 
<div class = "product - info"> 
<div class = "name"> 
<a href = " # "> M&anp;M'S 巧克力 豆 冰激凌 </a> 
</div> 
< div class = "product - price - weight"> 
< span > ¥ 68 </span> 
< span »/268g </span> 
</div> 
</div> 
<div class = "product - btn"> 
<a href ="#"> 加 入 购物 车 </a> 
</div> 
</li> 
<! -一 此 处 省 略 另外 5 个 列表 项 -一 > 
</ul> 
</div> 
<! =- > A --- 
< div class = "ickbuy — ad — news" 
<! -- 更 多 精 选 商 品 一 > 


« div class = "ickbuy - more clear"> 
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<a href="#"> 
< ing src = "ings/ickbuy- more. png" alt = "更 多 精 选 商品 "> 
< span class = "ickbuy - nore - title"> 更 多 精 选 商品 </span> 
</a> 
</div> 
<! 一 -顺丰 快递 到 家 --> 
<div class = "ickbuy- ad clear"> 
«ahref-"i"» 
< ing src = "imgs/ickbuy - ad. png" alt = "顺丰 快递 到 家 "> 
< span class = "ickbuy - ad - title"> 顺 丰 快 递 到 家 </span> 


</a> 
</div> 
<! -一 新 闻 列表 一 -> 


<div class = "ickbuy - news clear"> 
< h3 > 冰 天 美 帝 新 闻 < span class = "more"><a href = "+ ">E 4&</a></span ></h3 > 
<ul> 
<li><a href = " # OAA BUBLSEWI RFE PRK Z FAK WOR! </a ></1i> 
<li><a href ="#"> 冰 激 凌 有 助 怀孕 </a></1i> 
<li><a href ="# "> 英国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
<li><a href =" 井 "> 奇人 一 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<li><a href ="#"> 冰 激 凌 有 助 怀孕 </a></1i> 
<li><a href ="# "> 英国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快 乐 区 </a></1i> 


</ul> 
</div> 
</div> 
</div> 
<! -首页 尾部 -一 > 


<div class = "footer"> 
<div class = "copycontainer center"> 
«p» COPYRIGHT ? 冰 天 美 帝 </p > < p > 沪 ICP # 13018738 号 - 1 食品 流通 许可 证 
SP3101151210050229 </p> 
</div> 
</div> 
</div> 


(2) 设置 链接 和 viewport 内 容 

将 CSS 样式 放 在 rwd-css 文件 夹 中 ,命名 为 responsivemobile content. css。 利 用 meta 
viewport 属性 设置 在 移动 设备 上 是 否 原始 大 小 显示 和 是 否 缩放 的 声明 ,在 二 head 二 中 添加 
如 下 代码 。 


«link rel = "stylesheet" type = "text/css" href = "rwd- css/responsivemobile content.css"> 
<meta name = "viewport" content = "width = device - width, initial- scale- 1, 
maximum - scale = 1, user - scalable = no"/> 





(3) 运用 Media Query 


响应 式 网 页 设计 的 思路 中 ,一 个 重要 的 因素 是 怎样 处 理 图 片 方面 的 问题 。 有 很 多 方法 
可 以 解决 ,其 中 一 个 简单 易 行 的 方式 是 使 用 CSS 的 max-width 属性 : img { max-width: 
100%%;}。 这 样 图 片 最 大 的 宽度 不 会 超过 浏览 器 窗口 或 是 其 容器 可 视 部 分 的 宽度 ,所 以 当 窗 
口 或 容器 的 可 视 部 分 开始 变 罕 时 ,图 片 的 最 大 宽度 值 也 会 相应 地 减 小 ,图 片 本 身 永 远 不 会 被 
容器 边缘 隐藏 和 获 盖 。 

将 多 个 media query 整合 在 一 个 样式 表 文 件 responsivemobile_content. css 中 ,利用 
min-width 和 max-width 判断 设备 屏幕 尺寸 与 浏览 器 实际 宽度 ,其 完整 代码 如 下 。 


/* 禁用 iPhone 中 Safari 的 字号 自动 调整 * / 

html { 
— webkit- text - size- adjust: none; 

} 

/* 设置 HTML5 元 素 为 块 */ 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
display: block; 


} 
/* 设置 图 片 视频 等 自 适应 调整 x / 
img { 
max- width: 100 % ; 
height: auto; 
width: auto9; /* ie8 */ 
) 
. Video embed, .video object, .video iframe ( 
width: 100 % ; 
height: auto; 
} 
ait 
margin: Opx; 
padding: Opx; 
) 
.clear( 
clear: both; 
) 
body{ 
font- family: "MAER"; 
font- size: 14px; 
color: #36332e; 
background-color: &f4f4f4; 
) 


a, a:visited( 

color: #36332e; 

text- decoration: none; 
) 
a:hover( 




















ET 


至 此 ,优化 移动 设备 显示 页 面 内 容 的 代码 就 完成 了 。 


2. 移动 设备 上 显示 菜单 


该 导航 菜单 在 电脑 上 打开 后 显示 效果 如 图 9-4 所 示 , 水 平 排列 。 在 手机 (或 小 屏幕 设 
备 ) 上 显示 如 图 9-5 所 示 的 精简 样式 。 当 点 击 Menu 或 右边 的 符号 后 ,出 现 如 图 9-6 所 示 的 
菜单 效果 。 

(1) 添加 导航 菜单 的 内 容 

该 导航 菜单 的 代码 如 下 。 





<div class = "rwd" data - menu- style = "minimal" > 
<ul> 
<li><a href = '# > 首页 </a></1i> 
<li><a href = '# 新品 速递 </a></1i> 
<li><a href = '# > 热卖 推荐 </a></1i> 
<li><a href = '# 人 商品 分 类 </a></1i> 
<li><a href = '# 人 品牌 故事 </a></1i> 
<li><a href= '# > 会 员 活 动 </a></1i> 
</ul> 
</div> 


HTML 5 引入 了 一 项 新 特性 就 是 dataset, 该 属性 名 前 级 必须 带 有 “data-”, 后 面 允许 用 
任何 值 ,如 data-menu-style。 本 例 中 data-menu-style 二 “minimal" 这 个 属性 主要 提供 给 脚 
本 处 理 业务 逻 辑 。 

(2) 设置 链接 和 viewport 内 容 

将 之 后 需要 设置 的 CSS 样式 和 JavaScript 代码 分 别 放 在 rwd-css 和 red-js 文件 夹 中 , 命 
名 为 responsivemobilemenu. css 和 responsivemobilemenu. css。 设 置 链 接 和 viewport. 在 


<head> H Z Imin FARI o 


< link rel = "stylesheet" href = "rwd - css/responsivemobilemenu. css" type = "text/css"/> 
<script type = "text/javascript" src = "js/jquery- 1.11.2. js"></script > 
<script type = "text/javascript" src = "rwd- js/ responsivemobilemenu. css "></script> 
<meta name = "viewport" content = "width = device - width, initial- scale= 1, 

maximum — scale- 1, user — scalable = no" /> 


(3) 添加 CSS 样式 和 JavaScript 效果 
接 下 来 添加 CSS 样式 和 JavaScript 效果 ,完整 的 CSS 代码 如 下 。 


-rwd { 
display:block; 
position: relative; 
width:100 % ; 
padding: 0px; 
margin:0 auto ! important; 
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text 一 align: center; 
line- height:19px ! important; 

} 

.rwd * { 
— webkit — tap- highlight — color: transparent ! important; 
font — family:Arial; 

} 

.rwda { 

color: # ebebeb; 
text - decoration:none; 

} 

.rwd.rwd- main- list, .rwd . rwd- main- list li ( 
margin: 0px; 
padding: 0px; 

} 

.rwd ul { 
display:block; 
width: auto ! important; 
margin:0 auto ! important; 
overflow: hidden; 
list- style:none; 

} 

/* sublevel menu — in construction * / 

.rwd ulli ul, .rwd ulli ulli, .rwd ul li ul lia { 
display:none ! important; 
height :0px ! important; 
width:Opx ! important; 

} 

.rwd.rwd- main- list li ( 
display:inline; 
padding: padding: 0px; 
margin:Opx ! important; 

) 

. rwd- toggled { 
display:none; 
width:100 % ; 
position:relative; 
overflow: hidden; 
margin:0 auto ! important; 

} 

.rwd- button: hover { 
cursor: pointer; 

} 

.rwd .rwd- toggled ul { 
display:none; 
margin: 0px ! important; 
padding: 0px ! important; 
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width:25px; 

} 

. rwd. minimal .rwd- toggled ul lia { 
display: block; 
width:100 % ; 
text — align:center; 
padding: 10px Opx 10px 0px; 
border — bottom: 1px solid # dedede; 
color: # 333333; 

} 

.rwd.minimal .rwd- toggled ul li:first- childa { 
border — top: 1px solid # dedede; 

} 


完整 的 JavaScript 代码 如 下 . 


function responsiveMobileMenu() { 
$ ('. rwd'). each(function() { 
$ (this). children( 'ul').addClass( rwd- main- list’); // 标识 主 菜单 列表 
var $style = $ (this).attr('data- menu- style’); // 获取 菜单 样式 
$ (this). addClass( $ style); 
/* 菜单 列表 宽度 / 
var $width = 0; 
$ (this). find('ul 1i').each(function() { 
$width += $ (this). outerWidth() ; 
n; 
if ( $ .support.leadingWhitespace) { 
$ (this).css('max- width', $ width* 1.05 + 'px'); 
}else ( 
$ (this).css('width', $ width * 1.05 + 'px'); 
) 


n»; 
) 
function getMobileMenu() ( 
/* 创建 切换 下 拉 菜 单列 表 * / 
$ ('.rwd').each(function() { 
var menutitle = $ (this).attr("data— menu- title"); 
if ( menutitle == "" ) { 
menutitle = "Menu"; 
Jelse if ( menutitle == undefined ) { 
menutitle = "Menu"; 
} 
var $menulist = $ (this). children('.rwd- main- list').htm1(); 
var $menucontrols = "<div class = 'rwd - toggled - controls><div class = 'rwd - toggled 
—title>" + menutitle + "</div>< div class= 'rwd- button'»« span > &nbsp;</span > 
< span» &nbsp;</span >< span > &nbsp;</span » «/div » «/div »" ; 
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$ (this).prepend("< div class = 'rwd— toggled rwd — closed" + $ menucontrols + "<ul>" 
+ $menulist + "</ul ></div>"); 
Dni 
) 
function adaptMenu() ( 
/* 不 同 大 小 下 切换 菜单 * / 
$ ('.rwd').each(function() { 
var $width = $ (this).css('max- width’); 
$width = $ width. replace('px', "'); 
if ( $ (this). parent().width() < $width*1.05 ) ( 
$ (this).children('.rwd- main- list').hide(0); 
$ (this).children('.rwd- toggled’). show(0) ; 
}else ( 
$ (this).children('.rwd- main- list').show(0); 
$ (this).children('.rwd- toggled').hide(0); 


n; 


) 

$ (function() { 
responsiveMobileMenu( ) ; 
getMobileMenu(); 
adaptMenu() ; 


/* 点 击 手 机 菜单 滑 下 菜单 * / 
$ ('. rwd- toggled, .rwd- toggled .rwd- button').click(function(){ 
if ( $ (this). is(". rwd - closed")) { 
$ (this). find('ul'). stop(). show(300) ; 
$ (this). removeClass("rwd— closed"); 
}else { 
$ (this). find('ul'). stop(). hide(300) ; 
$ (this).addClass("rwd- closed"); 
) 
n; 
p; 
/* 重 设 大 小 后 隐藏 手机 菜单 x / 
$ (window).resize(function() { 
adaptMenu() ; 
p; 


至 此 ,响应 式 导航 菜单 就 完成 了 。 


R 训 ”响应 式 布局 实 训 


> 实 训 目 的 
熟悉 并 掌握 响应 式 布局 的 理念 和 方法 。 





b 实 训 内 容 
利用 前 面 介 绍 的 技术 和 方法 ,制作 出 如 图 9-9 和 图 9-10 所 示 的 响应 式 布局 效果 。 
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响应 式 布局 Viewport 
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图 9-9 可 视 区 域 宽度 较 大 时 的 显示 效果 
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现在 移动 终端 用 户 越 来 越 多 ， 不 过 ， 很 多 网 页 并 没有 针对 移动 
设备 进行 优化 。 为 解决 如 今 各 式 各 样 的 浏览 器 分 状 军 以 及 不 同 
移动 设备 的 显示 效果 ， 设 计 师 提出 了 响应 式 市 局 的 设计 方案 。 
响应 式 市 局 (这 一 概念 最 初 是 由 Ethan Marcotte 在 A List 
Apart 中 提出 的 ) 响应 了 用 户 及 其 所 用 设备 的 需求 。 版 式 会 
因 根据 设备 的 大 小 和 功能 而 变化 。 例 如 ， 手 机 可 能 会 以 单列 视 
DEN 而 同样 的 内 容 可 能 会 以 双 列 的 形式 呈现 在 





优 缺 点 Viewport 


响应 式 布 局 的 优点 有 ， 面 对 不 “响应 式 布 局 就 可 以 解决 这 一 问 
BOERS isthe. 能 够 题 。 对 于 针对 各 种 设备 优化 过 
快捷 解决 多 设备 显示 适应 问 。 的 网 页 ， 其 文档 部 必须 包含 
题 。 同 时 ， 它 也 有 自身 的 缺 viemort WOTE. ROR 
fa. 如 ， 兼容 各 种 设备 工作 重 码 会 指示 浏览 器 如 何 对 网 页 尺 
大 ,效率 低下 ,代码 累 歼 ， 会 十 和 缩放 比例 进行 控制 。 在 开 
出 现 隐藏 无 用 的 元 素 ， 加 载 时 zm 把 下 面 的 代码 复制 到 
间 加 长 等 。 head 标 签 中 。 





图 9-10 可 视 区 域 宽度 较 小 时 的 显示 效果 








> 实 训 步 又 


L. 设置 Meta 标签 


TE head fs 4€ HL JL A. — Meta >R ,代码 如 下 。 


<meta name = "viewport" content = "width = device - width, initial- scale = 1, maximum - scale = 
1, user - scalable = no"> 


Le. 输入 HTML 代码 


输入 HTML 代码 如 下 。 


<div id= "content"> 

< h2 > 响应 式 布局 </h2 > 

«p» «t -- 此 处 省 略 段落 内 容 --> </p> 
</div> 
<div id= "sidebar - left"> 

< h2 > 优 缺 点 </h2 > 

<p><! -- 此 处 省 略 段落 内 容 --> </p> 
</div> 
<div id= "sidebar - right"> 

< h2» Viewport </h2 > 

<p><! -一 此 处 省 略 段落 内 容 -- > </p> 


</div> 


E 运用 Media Query 


运用 Media Query 的 代码 如 下 。 


@media screen and (min - width: 650px) { 


#content{ 
width: 54% ; 
float: left; 
margin- right: 3%; 
} 
# sidebar - left{ 
width: 20% ; 
float: left; 
margin- right: 3% ; 
} 
# sidebar 一 right{ 


width: 20% ; 


D o samasse 





float: left; 
} 
} 
@media screen and (max - width: 650px) { 
# content( 
width: 100 % ; 
} 
# sidebar - left( 
width: 50% ; 
float: left; 


} 

# sidebar - right{ 
width: 505; 
float: left; 


项 目 总 结 


响应 式 布局 已 经 成 为 网 站 设计 的 主流 。 页 面 的 设计 与 开发 应 当 根 据 用 户 行为 以 及 设备 
环境 (系统 平台 、 屏 幕 分 辨 率 、 屏 幕 方 向 等 ) 进 行 相应 的 响应 和 调整 。 具 体 的 实践 方式 由 多 方 
面 组 成 ,包括 弹性 网 格 和 布局 .图 片 .CSS Media Query 的 使 用 等 。 无 论 用 户 正在 使 用 笔记 
本 还 是 iPad, 我 们 的 页 面 都 应 该 能 够 自动 切换 分 辩 率 .调整 图 片 尺 寸 及 执行 相关 脚本 功能 
等 ,以 适应 不 同 设备 。 换 句 话说 .页面 应 该 有 能 力 去 自动 响应 用 户 的 设备 环境 。 

本 项 目 主要 介绍 响应 式 布局 的 基本 概念 ,以 优化 网 页 内 容 和 设置 响应 式 菜单 为 例 , 讲 解 


响应 式 布局 的 基本 方法 和 技术 。 
ik 后 练习 
1. 利用 素材 中 banner. png 制作 如 图 9-11 一 图 9-13 所 示 的 响应 式 布局 效果 。 
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图 9-11 可 视 区 域 宽度 大 于 1280px 时 的 显示 效果 
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响应 式 布局 


不过 和 风神 和 动迁 生 优化, 为 如 河村 的 凡人 加 
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响应 式 布 局 笑 习 


€ file;///D:/9/task1.html 


响应 式 布局 


现在 移动 终端 用 户 越 来 越 多 ， 不 过 ， 很 多 网 页 并 没有 针对 
移动 设备 进行 优化 。 为 解决 如 今 各 式 各 样 的 浏览 器 分 关 率 
以 及 不 同 移动 设备 的 显示 效果 ， 设 计 师 提出 了 响应 式 布局 
的 设计 方案 。 响应 式 布 局 〈 这 一 概念 最 初 是 由 Ethan 

Marcotte 在 A List Apart 中 提出 的 ) 响应 了 用 户 及 
其 所 用 设备 的 需求 。 版 式 会 因 根据 设备 的 大 小 和 功能 而 变 
化 。 例 如 ， 手 机 可 能 会 以 单列 视图 的 形式 呈现 内 容 ， 而 同 
样 的 内 容 可 能 会 以 双 列 的 形式 呈现 在 平板 电脑 上 。 





图 9-13 可 视 区 域 宽度 小 于 650px 时 的 显示 效果 


2. 上 网 查看 哪些 网 站 是 采用 响应 式 布局 方式 设计 页 面 的 。 
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一 一 用 Bootstrap 重 构 网 页 











| 知识 目标 | 

。 了 解 前 端 开发 框架 的 概念 。 

* 了 解 Bootstrap. 

* 理解 Bootstrap 的 组 成 结构 。 

| 技能 目标 | 

* 掌握 Bootstrap 栅 格 方法 。 

。 能 够 利用 Bootstrap 设置 样式 。 

。 能 够 利用 Bootstrap 组 件 快速 修饰 元 素 。 
* 会 使 用 Bootstrap 的 JavaScript 插件 。 
| 素养 目标 | 

。 探索 实现 页 面 效果 快速 而 有 效 的 方法 。 
。 探索 网 页 设计 的 趋势 。 

。 培养 团结 协作 的 精神 。 


| 任务 EMM | 


> 学 习 情境 
小 黄 在 网 页 学 习 的 过 程 中 ,了 解 到 目前 有 很 多 成 熟 的 前 端 开发 框架 。 因 为 利用 框架 技 


术 可 以 极 大 地 提高 开发 效率 ,所 以 小 黄 希 望 继续 学 习 前 端 框架 技术 ,能 够 利用 框架 快速 布局 
页 面 , 设 置 样式 和 添加 动态 效果 。 


b 任务 描述 


利用 目前 流行 的 Bootstrap 框架 技术 制作 如 图 10-1 所 示 的 网 页 效果 。 
本 任务 主要 内 容 如 下 。 

(1) 利用 Bootstrap 栅 格 化 布局 页 面 。 

(2) 利用 Bootstrap CSS 重 构 页 面 样式 。 

(3) 基于 Bootstrap JavaScript 重 构 页 面 动 态 效 果 。 

问题 引导 : 

(1) 目前 主要 有 哪些 前 端 开发 框架 ? 

(2) 如 何 使 用 前 端 框架 ? 


b 任务 知识 


中 1 前端 开发 框架 


随 着 Web 技术 的 不 断 发 展 ,前 端 开发 框架 层出不穷 ,目前 比较 流行 的 框架 有 


Gp 
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图 10-1 新 闻 列 表 效 果 


Bootstrap, Foundation „jQuery Ul,jQuery Mobile,Sencha Ext JS 等 。 

jQuery UI 是 jQuery 项 目 组 中 对 桌面 端的 扩展 ,包括 了 丰富 的 控件 和 特效 ,与 jQuery 
无 颖 兼容 。 同 时 ,jQuery UI 中 预 置 了 多 种 风格 供用 户 选择 ,避免 了 千篇一律 。 如 果 对 预 置 
的 风格 不 满意 ,还 可 以 通过 jQuery UI 的 可 视 化 界面 ,自助 对 jQuery UI 的 显示 效果 进行 配 
置 ,非常 方便 。 

jQuery Mobile 是 jQuery 项 目 对 移动 端的 扩展 ,目前 支持 IOS, Android, Windows 
Phone, Black Berry 等 主流 平台 。 

Sencha Ext JS 是 Sencha 基于 Ext JS 开发 的 前 端 框架 ,内 容 极其 丰富 ,控件 ,特效 等 支 
持 非常 丰富 ,表格 图画、 报告 .布局 ,甚至 数据 连接 ,无 所 不 包 。 

Foundation 是 ZURB 旗下 的 主要 面向 移动 端的 开发 框架 ,但 是 也 保持 对 桌面 端的 
HA. 


| 2. Bootstrap 


Bootstrap 是 由 Twitter 推出 的 Web 前 端 框架 。 它 是 一 种 HTML CSS 和 JS 框架 ,用 
于 开发 响应 式 布局 、 移 动 设备 优先 的 Web 项 目 。 它 让 前 端 开 发 更 快速 .简单 ,利用 该 框架 开 
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发 者 能 快速 上 手 , 所 有 设备 都 可 以 适 配 、 所 有 项 目 都 能 适用 。 


Bootstrap 主要 针对 桌面 端 市 场 ,Bootstrap 3 提出 移动 优先 ,不 过 目前 桌面 端 依然 还 是 
Bootstrap 的 主要 目标 市 场 。Bootstrap 主要 基于 jQuery 进行 JavaScript 处 理 ,支持 LESS 
来 做 CSS 的 扩展 。Bootstrap 框架 在 布局 版式、 控件 ,特效 方面 都 非常 让 人 满意 ,都 预 置 了 
丰富 的 效果 , 极 大 方便 了 用 户 开发 。 随 着 Bootstrap 的 广泛 使 用 ,扩展 插件 和 组 件 也 非常 丰 
富 ,涉及 显示 组 件 、. 兼 容 性 、 图 表 库 等 各 个 方面 。 

图 10-2 所 示 是 Bootstrap 中 文 网 站 首页 (http://www. bootcss. com/) ,在 Bootstrap 文 
档 页 面 中 可 以 下 载 最 新 的 Bootstrap 源码 。 


Bootstrap 


简洁 、 直 观 、 强 悍 的 前 端 开发 框架 ,让 web 开 发 更 迅速 、 简 单 。 


Bootstrap 相 关 优质 项 目 推荐 


WR. SUM Dootsvap E 


Bootstrap Bt 作 Bootstrap 
求职 优 


Bootstrap 编码 规范 Open CDN 





图 10-2 Bootstrap 中 文 网 站 首页 


[5 Bootstrap 准备 


Bootstrap 源 文件 下 载 好 后 ,就 可 以 将 Bootstrap 提供 的 编译 好 的 CSS 文件 和 JS 文件 
(本 项 目 将 这 些 文件 存放 在 css 和 js 文件 夹 中 ) 引 入 到 过 head 之 中 ,代码 如 下 。 


B 
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<! -- 新 Bootstrap 核心 CSS 文件 --> 
< link rel = "stylesheet" href = " css/bootstrap. min. css"> 
<! -- 可 选 的 Bootstrap 主题 文件 (一 般 不 用 引入) 一 -> 
< link rel = "stylesheet" href =" css/bootstrap - theme. min. css"> 
<! -- jQuery 文件 。 务 必 在 bootstrap. min. js 之 前 引入 --> 
<script src = "js/jquery - 1.11.2. nin. js"></script> 
<! -- 最 新 的 Bootstrap 核心 JavaScript 文件 --> 
< script src = "js/bootstrap.min. js"></script> 


要 想 使 用 Bootstrap 还 需要 注意 一 点 : 页 面 必 须 为 HTML 5 文档 类 型 ,所 以 必须 在 每 
个 使 用 Bootstrap 页 面 的 开头 都 引用 如 下 代码 。 


<!DOCTYPE html > 
<html lang = "zh- CN"> 


S ERIS 
H T WARTA I SK Ai Ja «TE <head> pF fig BEIM viewport 元 数据 标签 。 


<meta name = "viewport" content = "width = device - width, initial- scale = 1"> 


l^ 栅 格 系统 


Bootstrap 提供 了 一 套 响 应 式 ,移动 设备 优先 的 流 式 栅 格 系统 , 它 将 页 面 最 多 划分 为 12 
列 , 如 果 页 面 宽度 是 960px, 最 小 的 单元 要 素 宽度 就 是 80px。 

栅 格 系统 用 于 通过 一 系列 的 行 与 列 的 组 合 来 创建 页 面 布 局 ,内 容 就 可 以 放 和 人 这 些 创 建 
好 的 布局 中 。 下 面 介绍 Bootstrap 栅 格 系统 的 工作 原理 。 

(1)“ 行 ?必须 包含 在 . container (固定 宽度 ) 或 . container-fluid (100% 5 HE P , VL B X 
其 赋予 合适 的 排列 和 内 补 。 

(2) 通过 “ 行 "在 水 平方 向 创建 一 组 * 列 ”。 

(3) 内 容 应 当 放置 于 * 列 ”内 ,并 且 , 只 有 * 列 ?可 以 作为 “ 行 ” 的 直接 子 元 素 。 

(4) 类 似 . row 和 . col-xs-4 这 种 预定 义 的 类 ,可 以 用 来 快速 创建 栅 格 布局 。Bootstrap 源 
码 中 定义 的 mixin 也 可 以 用 来 创建 语义 化 的 布局 。 

(5) 通过 为 “ 列 ” 设 置 padding 属性 ,从 而 创建 列 与 列 之 间 的 间隔 。 通 过 为 . row 元 素 设 
置 负 值 margin 从 而 抵消 掉 为 . container 元 素 设置 的 padding, 也 就 间接 为 “ 行 " 所 包含 的 “ 列 ” 
抵消 掉 了 padding. 

(6) 每 行 被 划分 成 12 等 份 的 栅 格 列 。 例 如 ,如果 把 一 行 分 为 3 个 相等 的 列 , 那 我 们 可 以 
使 用 3 个 . col-xs-4。 

CD 如 果 一 行 中 包含 的 列 数 大 于 12, 多 余 的 “ 列 ? 所 在 的 元 素 将 被 作为 一 个 整体 另 起 一 
行 排列 。 

(8) 栅 格 类 根据 断 点 大 小 应 用 到 相应 的 宽度 的 屏幕 上 。 当 定义 了 . col-md- * ,但 是 没有 
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通过 表 10-1 可 以 详细 查看 Bootstrap 的 栅 格 系统 是 如 何在 多 种 屏幕 设备 上 工作 的 。 









































表 10-1 Bootstrap 的 栅 格 参数 
屏幕 设备 超 小 屏幕 手机 小 屏幕 平板 中 等 屏幕 桌面 大 屏幕 大 桌面 
(<768px) (S768px) 显示 器 (三 992px) | 显示 器 (过 1200px) 
栅 格 系统 行为 总 是 水 平 排列 | 开始 是 堆 释 在 一 起 的 , 当 大 于 这 些 贱 值 时 将 变 为 水 平 排列 
. container 最 大 宽度 | None (自动 ) 750px 970px 1170px 
A . col-xs- . col-sm- . col-md- . col-lg- 
列 数 12 
最 大 列 宽 自动 一 62px 一 81px 一 97px 
RUE 30px (每 列 左右 均 有 15px) 
TRE 是 
偏 移 是 
列 排序 是 
栅 格 系统 的 设置 代码 如 下 。 


< div class = "row"> 


<div class = "col- md - 1">. col - md - 1 </div> 
<div class = "col- md - 1">. col - md - 1 </div> 
<div class = "col- md - 1">. col- md - 1 </div> 
<div class = "col- md - 1">. col- md - 1 </div> 
<div class = "col- md - 1">. col- md - 1 </div> 


<div class 





col - md- 1"5.col- md- 1 </div> 


<div class = "col- nd - 1">. col - nd- 1 «/div» 
<div class = "col- nd - 1">. col - nd - 1 </div> 
<div class = "col- md - 1">. col - nd- 1 </div> 
<div class = "col- md - 1">. col - nd- 1 </div> 
<div class = "col- md - 1">. col - nd- 1 </div> 
< div class = "col- nd - 1">. col - nd- 1 </div> 


«/div» 


<div class = "row"> 


<div class = "col — md - 8">. col — nd - 8 </div> 
<div class = "col- md - 4">. col - nd - 4 </div> 


</div> 


<div class = "row"> 


<div class = "col — md- 4">. col — md - 4 </div> 
<div class = "col — nd - 4">. col - nd - 4 </div> 
<div class = "col — nd - 4">. col - nd - 4 </div> 


</div> 


<div class = "row"> 


BT: 





<div class = "col- md - 6">. col - nd - 6 </div> 
< div class = "col- nd - 6">. col- nd - 6 </div> 
«/div» 


实现 的 效果 如 图 10-3 所 示 。 


J ene 





e/g ned 





A 10-3 MEAR 


图 10-3 中 第 一 行为 12 列 , 每 列 占 1 个 栅 格 ; 第 二 行为 两 列 , 分 别 占 8 个 栅 格 和 4 个 机 
格 ; 第 三 行为 两 列 , 各 占 6 个 栅 格 。 


[5 布局 容器 


Bootstrap 需要 为 页 面 内 容 和 栅 格 系统 包 庄 一 个 . container 容器 或 者 . container-fluid, 
需要 注意 的 是 ,由 于 padding 等 属性 的 原因 ,这 两 种 容器 类 不 能 互相 骨 套 。 
. container 类 用 于 固定 宽度 并 支持 响应 式 布局 的 容器 。 


<div class = "container"> 
</div> 
„container - fluid 类 用 于 100% 宽度 ,占据 全 部 视 口 (viewport) 的 容器 


<div class = "container - fluid"> 


</div> 


[s- 样式 及 组 件 


通过 为 图 片 添加 . img-responsive 类 可 以 让 图 片 支持 响应 式 布局 ,其 实质 是 为 图 片 设置 
了 max-width; 100% 和 height: auto 属性 ,从 而 让 图 片 在 其 父 元 素 中 更 好 地 缩放 。 

在 Bootstrap 中 ,. img-rounded 可 以 设置 圆 角 边 框图 片 效果 ,. img-circle 设置 圆 形 图 片 
效果 ,.img-thumbnail 设置 白 边 框 效 果 ,代码 如 下 。 


< img src = "imgs/banner. png" alt = "" class = "img - rounded" 


< img src = "imgs/banner. png” alt ="" class= "img- circle" 
< img src = "imgs/banner. png" alt ="" class = "img — thumbnail"> 


—— 








其 效果 如 图 10-4 所 示 。 

















图 10-4 图 片 效 果 
Bootstrap 中 设置 浮动 只 需要 添加 一 个 类 : pull-left 或 者 pull-right, 代 码 如 下 。 


<div class = "pull - left">...</div> 
<div class = "pull - right">...</div> 


. center-block 的 效果 是 让 内 容 块 居 中 ,其 实质 是 为 任意 元 素 设置 display: block 属性 并 
通过 margin 属性 让 其 中 的 内 容 居中 。 

. clearfix 的 效果 是 清除 浮动 。 

为 table 二 标签 添加 table 类 可 以 实现 具有 一 定 的 padding 以 及 水 平方 向 的 分 割 线 
效果 。 


<table class= "table"> 

<tr> 
<td> 学 号 </td> 
<td> 姓 名 </td> 
<td> 班 级 </td> 
<td> 科 目 </td> 
<td> 成 绩 </td> 

</tr> 

<tr> 
< td> 1011101 </td> 
<td> 张 三 </td> 
<td>13 电 商 1 班 </td> 
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<td> 网 页 设计 </td> 
<td> 89 </td> 

</tr> 

<tr> 
« td» 1011102 </td> 
<td> 李 四 </td> 
<td>13 电 商 1 班 </td> 
<td> 网 页 设计 </td> 
<td> 92 </td> 

</tr> 

<tr> 
< td> 1011103 </td> 
<td> 王 二 </td> 
<td>13 电 商 1 班 </td> 
<td> 网 页 设计 </td> 
<td>78 </td> 

</tr> 

</table> 


其 表格 效果 如 图 10-5 所 示 。 








图 10-5 表格 效果 


A<a>,<button> , input 6X WIM. btn、. btn-default,. btn-primary 等 ,可 以 快 
速 创建 一 个 带 有 预定 义 样式 的 按钮 。 

Bootstrap 中 的 导航 组 件 依赖 一 个 类 . nav。 导 航 条 需要 使 用 二 nav 二 元 素 ,如 果 使 用 通 
用 的 二 div 之 元 素 的话 , 必 须 设置 role 一 "navigation "属性 ,这 样 能 够 让 使 用 辅助 设备 的 用 户 
明确 知道 这 是 一 个 导航 区 域 。 

Bootstrap 使 用 的 是 Glyphicon Halflings 的 图 标 字体 。 





< button type = "button" class = "btn btn- default btn- 1g"> 
< span class = "glyphicon glYphicon - search" aria - hidden = "true"></span > Search 
</button > 


Er: JS 插件 


Bootstrap 自 带 了 12 种 jQuery 插件 ,扩展 了 功能 ,可 以 给 站 点 添加 更 多 的 互动 ,可 以 简 
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单 地 一 次 性 引入 所 有 插件 ,或 者 逐个 引入 页 面 。 


以 一 个 弹出 框 为 例 来 介绍 其 jQuery 插件 使 用 方法 ,首先 需要 设置 弹出 框 的 data 编程 接 
口 ,代码 如 下 。 


$ (function () { 
$ ('[data - toggle = "popover"]'). popover() ; 
}) 


下 面 的 代码 可 以 实现 如 图 10-6 所 示 的 弹出 框 效 果 。 


< button type = "button" class = "btn btn - lg btn - danger" data - toggle = "popover" title = 
"Bootstrap" data - content = "Bootstrap 是 由 Twitter 推出 的 Web 前 端 框架 。 它 是 一 种 HTML.CSS 和 
JS 框架 ,用 于 开发 响应 式 布局 ,移动 设备 优先 的 Web 项 目 。 它 让 前 端 开发 更 快速 、 简 单 ,利用 该 框架 开 
发 者 能 快速 上 手 , 所 有 设备 都 可 以 适 配 ,所 有 项 目 都 能 适用 。"> 点 我 弹出 /隐藏 弹出 框 </button> 


Bootstrap 


Bootstrap 是 由 Twitter 推出 的 Web 前 端 框 
RR. 它 是 一 种 HTML、CSS 和 JS ER, 
用 于 开发 响应 式 布局 、 移 动 设备 优先 的 
Web 项 目 。 它 让 前 端 开发 更 快速 简单, 
利用 访 框 架 开 发 者 能 快速 上 手 ， 所 有 设 
备 都 可 以 适 配 ， 所 有 项目 都 能 适用 。 


点 我 弹出 /隐藏 弹出 框 





图 10-6 弹出 框 效果 
设置 data-placement 属性 值 为 left; top, bottom 和 right 可 以 控制 弹出 框 的 方向 。 


b 任务 实施 


下 面 介绍 利用 Bootstrap 栅 格 系统 进行 页 面 的 快速 布局 ,再 利用 Bootstrap 提供 的 CSS 
样式 和 组 件 来 修饰 页 面 ,最 后 采用 JavaScript 插件 快速 实现 图 片 轮 播 效果 ,具体 操作 步 又 


如 下 。 


B o sames 





L. 利用 Bootstrap 栅 格 布局 页 面 


利用 Bootstrap 提供 的 栅 格 系统 布局 页 面 ,形成 如 图 10-7 所 示 的 效果 。 要 求 导航 条 占 
8 个 栅 格 ,搜索 框 和 购物 车 占 4 个 栅 格 ,产品 列表 占 9 个 栅 格 ,右边 新 闻 列 表 列 占 3 个 栅 格 。 


MER 




















图 10-7 栅 格 布局 后 的 效果 
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(D SIA CSS 和 JS 文件 


在 页 面 开头 引入 相关 文件 ,并 设置 HTML 5 文档 类 型 ,代码 如 下 。 


<!doctype html > 
<html lang = "zh 一 CN"> 
<head> 
<meta charset = "utf - 8"> 
<meta http- equiv = "X — UA - Compatible" content = "IE = edge"> 
<meta name = "viewport" content = "width= device - width, initial- scale=1"> 
<title > 用 Bootstrap 重 构 网 页 </title> 
< link rel = "stylesheet" type = "text/css" href = "css/bootstrap. min. css"> 
<script type = "text/javascript" src = "js/jquery- 1.11.2. js"></script > 
<script type = "text/javascript" src = "js/bootstrap. min. js"></script > 
</head> 


(2) 添加 HTML 内 容 
本 例 还 是 采用 冰 天 美 帝 首页 的 页 面 ,其 HTML 文档 代码 如 下 。 


<! -一 首页 header --> 
<div class = "header"> 
<div> 
<a href ="#"> 
< ing src = "imgs/logo. png" alt = " 冰 天 美 帝 "> 
</a> 
</div> 
<ul> 
<li><a href ="#">H W</a></li> 
<li><a href =" 间 "> 新 品 速递 </a></1i> 
<li><a href ="#"> 热 卖 推荐 </a></1i> 
<li><a href ="#"> 商 品 分 类 </a> 
<ul> 
<li><a href ="#"> 哈 根 达 斯 </a></1i> 
<li><a href ="#">M&amp;M'S</a></li> 
<li><a href = " # "> 本: 杰 瑞 </a></1i> 
<li><a href ="#">#8¥</a></li> 
</ul> 
</li> 
<li><a href = " # ">m RM S</a></li> 
<li><a href ="#"> 会 员 活动 </a></1i> 
</ul> 


<div> 
<div> 
< input type = "text" > 
</div> 
< button type = "button"> 








En [d 


< button class = "btn btn- default btn- block" type = "submit"> 加 入 购物 车 
</button> 
</div> 
</li> 
<! -一 此 处 省 略 其 他 5 个 列表 项 -一 > 
</ul> 
</div> 
<div> 
<div> 
<a href ="#"> 
< img src = "imgs/ickbuy - more. png" alt = "更 多 精 选 商品 "> 
< span class = "ickbuy - more - title"> & fifi fi i «/ span» 
</a> 
</div> 
<div> 
<a href ="#"> 
< ing src = "imgs/ickbuy - ad. png" alt = "顺丰 快递 到 家 "> 
< span class = "ickbuy - ad - title"> 顺 丰 快 递 到 家 </span > 
</a> 
</div> 
<div> 
< h3 > 冰 天 美 帝 新 闻 < span ><a href =" # ">< small > 更 多 </small ></a ></span ></h3 > 
<ul> 
<li><a href ="#"> 奇 人 ~~ 伊 拉克 画家 竟然 这 么 用 冰激凌 1!</a></1i> 
<li><a href ="#"> 冰 激 凌 有 助 怀孕 </a></1i> 
<1i><ahref="#"> 英 国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href = " # ">i VIC Hal MK EAR K</a > </1i > 
<li><a href ="#">4} A — PALE ii ac 3€ 3X FAK BOR </a></1li> 
<li><a href =" # SK HRA Hh Pe</a></li> 
<li><a href ="#"> 英 国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
</ul> 
</div> 
</div> 


<! -- 首 页 尾部 --> 
<div> 
< p > COPYRIGHT © 冰 天 美 帝 </p > < p> 沪 ICP 备 13018738 号 - 1 食品 流通 许可 证 
SP3101151210050229 </p> 
</div> 


此 时 ,页 面 效果 如 图 10-8 所 示 。 

CD 利用 栅 格 系统 

接 下 来 就 可 以 使 用 Bootstrap 提供 的 栅 格 系统 了 。 栅 格 系统 用 于 通过 一 系列 的 行 与 列 
的 组 合 来 创建 页 面 布局 , 行 必 须 包 含 在 . container( 固 定 宽度 ) 或 . container-fluid(100% 宽 度 ) 
中 ,代码 如 下 。 


o—— 
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图 10-8 添加 纯 HTML 内 容 效果 











<! -一 首页 header -一 > 
<div class = "header"> 
<div class = "container center - block"> 
<div class = "row "> 
<div class = "col- md - 8"> 
<! -一 省 略 导航 条 代码 -一 > 
</div> 
<div class = "col 一 md 一 4"> 
<! -- 省 略 搜索 框 和 购物 车 代码 -一 > 
</div> 
</div> 
</div> 
</div> 


<div class = "container"> 
<! -一 首页 banner -- ^ 
<div class = "row"> 
< div class = "col - md - 12"> 
<! -- 省 略 轮 播 图 代码 -一 > 
</div> 
</div> 
</div> 
<! -- 首 页 主体 --> 
<div class = "container"> 
<div class = "row "> 
< div class = "col- md - 9"> 
<! 一 省 略 产 品 图 片 列表 代码 --> 
</div> 
<div class = "col- md- 3"> 
<div class = "col - md- 12> 
<a href ="#"> 


< img src = "imgs/ickbuy- more. png" alt = "更 多 精 选 商品 "> 
< span class = "ickbuy - nore - title"> 更 多 精 选 商品 </span > 


</a> 

</div> 

<div class = "col- md- 12 "> 
<ahref ="#"> 


< img src = "imgs/ickbuy— ad. png" alt = "顺丰 快递 到 家 "> 
< span class = "ickbuy- ad - title"> 顺 丰 快 递 到 家 </span> 


</a> 

</div> 

<div class = "col - md- 12 "> 
<! -- 省 略 新 闻 列 表 代码 -一 > 

</div> 

</div> 
</div> 
</div> 


<! 一- 首页 尾部 一 > 
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<div class = "footer"> 
<div class = "container"> 
<div class = "row "> 
<div class = "col - md- 12"> 
< p>COPYRIGHT © 冰 天 美 帝 </p> <p> 沪 ICP 备 13018738 号 -1 食品 流通 许可 证 
SP3101151210050229 </p> 
</div> 
</div> 
</div> 
</div> 


此 时 ,利用 Bootstrap 栅 格 系统 布局 页 面 就 完成 了 ,最 终 效 果 如 图 10-7 所 示 。 


12. 基于 Bootstrap CSS 重 构 页 面 样式 


在 进行 栅 格 布局 的 基础 上 ,我 们 还 需要 对 其 进行 样式 的 修饰 ,如 使 用 图 标 字 体 、 导 航 条 
水 平 排列 .产品 图 片 列表 两 行 三 列 显示 、 修 改 链接 颜色 等 ,效果 如 图 10-9 所 示 。 
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图 10-9 修改 样式 后 的 效果 





(1) 应 用 Bootstrap 框架 


利用 Bootstrap 已 有 的 框架 来 修饰 页 面 ,如 图 标 字 体 、 水 平 导 航 条 、 下 拉 菜 单 、 搜 索 框 和 
按钮 等 。 应 用 Bootstrap 框架 的 代码 如 下 。 


<div class= "header"> 
<div class = "container center — block"> 
<div class = "row "> 
< div class = "col - md - 8"> 
<div role = "navigation"> 
< div class = "navbar - header" 
«a class = "navbar - brand" href = " # "> 
< ing src = " ings/1ogo. png" alt = " 冰 天 美 帝 "> 
</a> 
</div> 
<ul class = "nav navbar - nav "> 
<li><a href="#">#f Wi</a></li> 
<li><a href ="# "> 新 品 速 递 </a></1i> 
<li><a href = " # "> 热卖 推荐 </a></1i> 
< li class = "dropdown"><a href ="#" class = "dropdown - toggle" 
data- toggle = "dropdown" role = "button" aria - expanded = " 
false"> 
商品 分 类 < span class = "caret"></span ></a> 
<ul class= "dropdown — menu" role = "menu"> 
<li><a href =" 井 "> 险 根 达 斯 </a></1i> 
<li><a href ="#">M&amp;M'S</a></li> 
<li><a href =" 井 "> 本 . 杰 瑞 </a></1i> 
<li><a href ="#">ff#</a></li> 
</ul> 
</li> 
<li><a href ="#"> 品 牌 故事 </a></1i> 
<li><a href ="#"> 会 员 活 动 </a></1i> 





</ul> 
</div> 
</div> 
<div class = "pull — right" > 


< form class = "navbar - form navbar - left" role = "search"> 
<div class = "input - group"> 
< input type = "text" class = "form- control" id = "inputGroupSuccess2" 
aria- describedby = "inputGroupSuccess2Status" placeholder = "了 哈 根 达 斯 "> 
< span class = "btn input — group - addon"> 
«span class = "glyphicon glyphicon- search" aria - hidden = "true"></span > 
</span> 
</div> 
< button class = "btn btn- primary" type = "button"> 
<span class = "glyphicon glyphicon - shopping - cart" 
aria- hidden = "true"></span > < span> 购 物 车 </span> 
</button > 
</form> 
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</div> 
</div> 
</div> 
</div> 


<div class = "container"> 
<! — H XE banner --> 
< div class = "row"> 
<div class = "col - nd - 12"» 
<! 一 省 略 轮 播 图 代码 -一 > 
</div> 
</div> 
</div> 


<div class = "container"> 
<! -首页 主体 > 
<div class = "row pagebody"> 
<div class = "col - md - 9"> 
<ul class = "list - unstyled list — inline"> 
<li> 
<div> 
<ahref="#"> 
< img src = "imgs/mm. png" class = "ing - responsive"> 
</a> 
</div> 
<div> 
<h5> 
<a href ="#">M&amp;M'S 巧克力 豆 冰激凌 </a> 
</h5 > 
<div> 
<em> 
< span > Y 68 </span> < span >/268g </span> 
</em> 
</div> 
</div> 
<div> 
<button class= "btn btn- default btn- block" type = "submit"> 
加 入 购物 车 </button> 
</div> 
</li> 
<! -- 省 略 其 他 图 片 列表 项 -一 > 
</ul> 
</div> 
<div class = "col - md- 3"> 
<div class = "col- md- 12 ickbuy 一 more "> 
<a href="#"> 
< ing src = "ings/ickbuy- more. png" alt = "更 多 精 选 商品 "> 
< span class = "ickbuy - nore - title"> 更 多 精 选 商品 </span> 
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</a> 
</div> 
<div class = "col- md- 12 ickbuy- ad "> 
<a href=" # 4E 
< ing src = "imgs/ickbuy- ad. png" alt = "顺丰 快递 到 家 "> 
< span class = "ickbuy - ad - title"> 顺 丰 快 递 到 家 </span> 
</a> 
</div> 
<div class = "col- md- 12 ickbuy- news "> 
< h3 > 冰 天 美 帝 新 闻 < span class = "pull- right"><a href = " # ">< small > 更 多 
</small ></a></span></h3 > 
<ul class = "list - unstyled"> 
<1i><ahref=" 井 "> 奇人 一 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<li><a href ="# "> 冰激凌 有 助 怀 孕 </a></1i> 
<li><a href =" + "> 英国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快乐 区 </a></1i> 
<li><a href =" 井 "> 奇人 一 伊拉克 画家 竟然 这 么 用 冰激凌 !</a></1i> 
<li><a href ="#"> 冰 激 凌 有 助 怀 孕 </a></1i> 
<li><a href =" # "> 英国 鼓励 市 民 吃 冰激凌 </a></1i> 
<li><a href ="#"> 吃 冰激凌 刺激 大 脑 快 乐 区 </a></1i> 


</ul> 
</div> 
</div> 
</div> 
</div> 
<! 一 -首页 尾部 -一 > 


<div class = "footer"> 
<div class = "container"> 
<div class = "row "> 
<div class = "col 一 md 一 12"> 
<p >COPYRIGHT ? 冰 天 美 帝 </p> <p> 沪 ICP # 13018738 号 - 1 食品 流通 许可 证 
SP3101151210050229 </p> 
</div> 
</div> 
</div> 
</div> 


(2) CSS 修饰 
为 了 让 页 面 达到 自己 想 要 的 效果 ,有 了 时 还 需要 添加 自己 设计 的 CSS 样式 代码 ,如 链接 颜 
色 、 页 面 背景 色 、 图 片 列表 间距 ,文本 投影 等 ,代码 如 下 。 


a,a:visited{ 
color: #36332e ! important; /* ‘important 提高 其 重要 度 ,优先 于 任何 规则 * / 


text — decoration: none; 


x— 
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a:hover{ 
color: # BBOF73; 
} 
body{ 
font — family: "微软 雅 黑 "; 
font — size: 14px; 
color: #36332e; 
background-color: # f4f4f4 ! important; 
) 
. header( 
width: 100% ; 
padding: 20px 0; 
background-color: # fff; 
border — bottom - style: solid; 
border - top- width: 2px; 
border — bottom - color: # c4c4c4; 
} 
. navbar — form button,. navbar — form button a,. navbar - form button a: visited,. navbar — form 
button a: hover{ 
background-color: #D5077F ! important; 
border — color: # BBOF73 ! important; 
} 
: pagebody{ 
padding - top: 20px; 
} 
. pagebody ul 1i{ 
padding: 5px; 
margin: 5px; 
background-color: # fff; 
} 
. pagebody ul li button{ 
margin: 10px 0; 
} 
. ickbuy - more{ 
margin: 10px 0 15px 0; 
height: 80px; 
width: 100 % ; 
overflow: hidden; 


) 

. áckbuy - ad{ 
height: 258px; 
width: 100 % ; 
overflow: hidden; 

) 


. ickbuy- more - title{ 
color: # fff; 
position: absolute; 








font 一 size: 20px; 
left: 20px; 
top: 20px; 
font — weight: bolder; 
text — shadow: 1px 2px 3px rgba(0,0,0,0.5); 
} 
. ickbuy- ad- title{ 
position: absolute; 
left: 20px; 
top: 20px; 
font- size: 18px; 
font - weight: bolder; 
} 
. ickbuy- news ul li { 
margin: 0; 
padding: 2px 0; 
background-color: # f4f4f4 ! important; 
} 
. ickbuy - news h3{ 
border - bottom - style: solid; 
border — bottom - width: 2px; 
border - bottom - color: #c4c4c4; 
padding - bottom: 5px; 
width: 100% ; 
} 
. footer{ 
margin-top: 15px; 
padding - top: 15px; 
padding - bottom: 15px; 
background-color: #c4c4c4; 
color: #36332E; 
line- height: 15px; 
) 


此 时 , 即 可 实现 如 图 10-9 所 示 效 果 。 


[3. 基于 Bootstrap JavaScript 重 构 页 面 动态 效果 


使 用 Bootstrap JavaScript 框架 实现 页 面 中 间 的 轮 揪 图片 效果 ,如 图 10-1 所 示 。 

COD 选择 轮 播 插件 

Bootstrap 轮 播 插件 是 一 种 灵活 的 响应 式 的 向 站 点 添加 滑 块 的 方式 。 除 此 之 外 ,内 容 也 
是 足够 灵活 的 ,可 以 是 图 像 、 内 骨 框 架 、 视 频 或 者 其 他 想 要 放置 的 任何 类 型 的 内 容 。 

(2) 应 用 轮 播 插件 

为 了 实现 轮 播 ,只 需要 添加 带 有 该 标记 的 代码 即 可 。 不 需要 使 用 data 属性 ,只 需要 简 
单 的 基于 class 的 开发 。 以 下 为 轮 播 部 分 完整 代码 。 








全 一 一 一 
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<div class = "row"> 
<div class = "col - md - 12"> 


<div id= "carousel ~ example - generic" class = "carousel slide" 
data - ride = "carousel"> 
<! -一 轮 播 指 标 --> 
< ol class = "carousel — indicators"> 
< li data - target = " # carousel - example - generic" data - slide- to= "0" 
class = "active"></li> 
«li data - target = "+ carousel - example - generic" data - slide- to = "1"></li > 
<li data - target = "+ carousel - exanple- generic" data - slide- to = "2"></li > 
</ol> 
<! -— 轮 播 项 目 --> 
<div class = "carousel - inner" role = "listbox"> 
<div class = "item active"> 
< ing src = "ings/banner. png" alt ="..."> 
<div class = "carousel — caption"> 
成 为 会 员 优 惠 更 多 
</div> 
</div> 
<div class = "item"> 
< ing src = "imgs/banner2. png" alt="... 
<div class = "carousel - caption"> 
春季 促销 部 分 商品 8 折 
</div> 
</div> 
<div class = "item"> 
< img src = "ings/banner. png" alt ="..."> 
<div class = "carousel - caption"> 
成 为 会 员 优 惠 更 多 
</div> 
</div> 
</div> 
<! -- 轮 播 导航 --> 
<a class = "left carousel — control" href = "+ carousel - example - generic" 
role = "button" data- slide = "prev"> 
< span class = "glyphicon glyphicon - chevron - left" aria- hidden = "true"></span> 
« span class = "sr - only"> Previous </span> 
</a> 
<a class = "right carousel - control" href = "i carousel — example - generic" 
role = "button" data- slide = "next"> 
< span class = "glyphicon glyphicon - chevron - right" aria- hidden = "true"></span> 
< span class = "sr - only"> Next </span> 
</a> 





</div> 


这 时 ,一 个 美观 的 轮 播 效果 就 快速 实现 了 。 
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Kill FA Bootstrap 设置 标签 页 


> 实 训 目 的 
熟悉 并 掌握 Bootstrap 框架 的 使 用 方法 ,学 会 标签 页 (Tab) 插 件 的 应 用 。 


> 实 训 内 容 
利用 Bootstrap 中 标签 页 (Tab) 持 件 ,制作 出 如 图 10-10 所 示 的 标签 页 切换 效果 。 


Bootsvapti x V8 





fle.///O-/10/tab-bootstrap html 


商品 展示 。 商品 参数 。 ”品质 保障 


M&M 5 巧克力 豆 冰 激 凌 


M&M'S OF CHOCOLATE BEANS ICE CREAM 





布 利 斯 奥 利 奥 巧克力 | 
BREVE 


2569 
(077567275059 





A 10-10 标签 页 效果 
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> 实 训 步 又 


L. 设计 思路 分 析 


通过 data 属性 ,需要 添加 data-toggle— "tab" 8X data-toggle =" pill" £i AS HEHE H 
添加 nav 和 nav-tabs 类 到 ul 中 ,会 应 用 Bootstrap 标签 样式 ; 添加 nav 和 nav-pills 类 到 ul 
中 ,会 应 用 Bootstrap We Pest FE sk. 


l. 输入 html 代码 


<! 一 标签 项 目 列表 -一 > 


<ul> 
<li><a href = " # show" aria- controls = "show" role = "tab" data— toggle = "tab"> 商 品 展示 
</a></li> 
<li><a href = " # detail" aria- controls = "detail" role="tab" data — toggle = "tab"> 商 品 
参数 </a></1i> 
<li><a href = " # garantee" aria- controls = "garantee" role= "tab" data - toggle = "tab"> 
品质 保障 </a></1i> 
</ul> 
<! -一 标签 项 目下 内 容 --> 
<div> 


<div >< img src = "imgs/1.png"></div> 
<div > <! -一 此 处 省 略 商品 参数 具体 内 容 -- > </div> 
<div>< img src = "imgs/2. jpg"></div> 

</div> 


| EE 设置 标签 页 效果 


设置 标签 页 效果 的 代码 如 下 。 


<! -一 标签 项 目 列表 --> 
<ul class = "nav nav - tabs" role= "tablist" id- "myTab"> 
«li role = "presentation" class = "active"»« a href = "+ show" aria- controls = "show" 
role- "tab" data- toggle = "tab"> 商 品 展示 </a></1i> 
<li role = "presentation">< a href = " # detail" aria- controls = "detail" role - "tab" 
data - toggle = "tab"> 商 品 参 数 </a></1i> 
<li role = "presentation"><a href = " # garantee" aria - controls = "garantee" role = 
"tab" data- toggle = "tab"> 品 质保 障 </a></1i> 
</ul> 
<! -一 标签 项 目下 内 容 --> 


<div class = "tab- content"> 
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<div role- "tabpanel" class = "tab— pane active" id= "show">< img src = "imgs/1.png"></div> 
<div role = "tabpanel" class= "tab- pane" id= "detail" 
<! -一 此 处 省 略 商品 参数 具体 内 容 一 > </div> 
<div role = "tabpanel" class = "tab- pane" id= "garantee">< img src = "imgs/2. jpg"></div> 
</div> 
<! 一 使 用 JavaScript 来 启用 标签 页 -一 > 
<script> 
$ (function () { 
$ ('#myTab a:first').tab('show'); 
n 
</script> 


m HS 


Bootstrap 是 一 个 用 于 快速 开发 网 页 应 用 程序 和 网 站 的 前 端 框架 , 它 是 基于 HTML, 
CSS 和 JavaScript 的 。Bootstrap 提供 了 一 个 带 有 网 格 系统 、 链 接 样式 .背景 的 基本 结构 ; 具 
有 全 局 的 CSS 设置 ,定义 基本 HTML 元 素 样 式 等 特性 ; 包含 十 几 个 可 重用 的 组 件 ; 
Bootstrap 还 包含 了 十 几 个 自 定义 的 jQuery 插件 。 


课 后 练习 
1. 利用 Bootstrap 框架 制作 如 图 10-11 所 示 的 表单 效果 。 


TEREPRE 


未 选择 文件 。 


A REBAR 





图 10-11 表单 效果 





2. 利用 Bootstrap 制作 如 图 10-12 所 示 的 分 页 效果 。 


€ fle//D/10/page-bootstraphtmle 








图 10-12 分 页 效果 











任务 1 学 校 网 站 制作 


b 任务 描述 


本 任务 需要 完成 一 个 学 校 网 站 首页 的 制作 ,效果 如 图 11-1 所 示 。 在 添加 HTML 元 素 
后 ,需要 利用 CSS 修改 其 样式 ,利用 JavaScript 添加 页 面 动态 效果 。 
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图 11-1 学 校 网 站 首页 


b 任务 实施 


L. 添加 HTML 内 容 


本 任务 的 文档 结构 如 图 11-2 Bron 。 


一 一 顶部 
L—— 顶部 左 侧 菜 单 
c 顶部 右 侧 图 标 
e 中 间 部 分 
上 一 Logo 部 分 
L— 导航 菜单 
[一 一 主体 部 分 
c 左 侧 选 项 卡 
[一 一 右 侧 新 闻 列 表 
图 片 滚动 
一 一 底部 


图 11-2 学 校 网 站 首页 的 HTML 文档 结构 
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其 HTML 代码 如 下 。 


<! —— 顶部 --> 
<div id= "top"> 
<div class = "top - main"> 
<! -- 顶部 左 侧 菜单 --> 
« dl class = "top- left f1"> 
< dd class = "on">< h3 ><a target = " blank" href =" 井 "> 网 站 首页 </a></h3 » «/dd > 


«dd»«h3»«a target="_blank" href = " # ">#i H H -ù</a ></h3 » «/dd > 
<dd><h3><a target ="_blank" href =" # "Jr F Fr </a » «/h3 ></dd> 
<dd><h3><a target="_blank" href = "+ "># d fl Æ</a » «/h3 ></dd> 
<dd><h3><a target = " blank" href = "+ "># 4 AF </a></h3 ></dd> 

</dl> 

<!-- 顶部 右 侧 图 标 -一 > 

<dl class = "top- right fr"> 


<dd> 
<h3><a target ="_blank" href ="+" class="wx"> 微 信 </a></h3> 
<ul> 
«li»« ing src = "images/ewm. jpg" alt = ""></li> 
</ul> 
</dd> 
<dd> 
<h3 ><a target="_blank" href ="#" class = "xl"> 新 浪 </a></h3 > 
<ul> 
<1i>< img src = "images/ewm. jpg" alt = ""></li> 
</ul> 
</dd> 
<dd> 
<h3 ><a target="_blank" href =" #" class = "tx"> 腾 讯 </a></h3 > 
<ul> 
«li»« img src = "images/ewm. jpg" alt = ""></li> 
</ul> 
</dd> 
«/dl» 
</div> 
</div> 


<! —— 中 间 部 分 --> 
<div class = "container w950"> 
<! —— Logo 部 分 --> 
<div id= "logo" class = "w950"> 
<div class = "header - input" > 
< form method = "get"> 
< input type = "text" name = "search" id= "search" > 
< button type = "submit" name = "search- btn" id= "search- btn"> 
< i class = "icon - search icon- large"></i></button> 
</form> 
</div> 
</div> 
</div> 
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<! -一 导航 菜单 -一 > 
<div id= "nav" class = "w950"> 
<div class = "navBar"> 
<ul class = "nav clearfix"> 
<li id= "m1" class = "m"» 
<h3 ><a class= "nav_index" target="_blank" href ="#">H Wi</a></h3> 
</li> 
<li id= "m5" class = "m"> 
<h3><a_ href-"£ "E BEBE </a></h3 > 
</li> 
<li id= "m2" class= "n" 
<h3><a_ href ="#"> 机 构 设 置 </a></h3 > 
<div class = "sub"> 
<dl> 
<dt><a href =" 井 "> 党 群 机 构 </a></dt> 
<dd><a href = " # "JA </a ></dd> 
<dd><a href ="#"> 组 织 部 </a></dd> 
<dd><a href ="#"> 宣 传 部 </a></dd> 
<dd><a href ="#"> 监 察 处 </a></dd> 
<dd><a href ="#"> 工 会 </a></dd> 
<dd><a href ="#"> 团 委 </a></dd> 


</dl> 
<! -- 此 处 省 略 其 他 dl 表格 内 容 -一 > 
</div> 
</li> 
<! -- 此 处 省 略 其 他 菜单 项 --> 
</ul> 
</div> 
</div> 
<! -- 主体 部 分 --> 


<div id- "main" class = "clearfix"> 
<! -一 左 侧 选项 卡 --> 
<div id= "main- left" class= "fl"> 
<div class = "ajaxBox"> 
<div class = "hd"> 
<ul> 
<li class = "tab_index"><a href ="#"> 学 院 要 闻 </a></1i> 
<li><a href ="#"> 视 频 新 闻 </a></1i> 
<li><a href ="#"> 系 部 快讯 </a></1i> 
<li><a href =" # "MAA </a></li> 
<li><a href =" +4 "> 媒体 看 学 院 </a></1i> 
</ul> 
</div> 
<div class = "bd"> 
<div class = "con" > 
<div class = "news clearfix"> 
<div class = "news - left fl pt5"> 





Ec 


< img src = "images/player. jpg" alt = ""> 
</div> 
<div class = "news - right fr"> 
<ul> 
<li><a href = ""> 澳 大 利 亚 塔 斯 马 尼 亚 州 教育 部 代表 团 .…</a> 
</li> 
<li><a href= ""> 安 徽 工程 大 学 教学 督导 组 来 院 指导 工作 </a> 
</1i> 
<li><a href = ""> 安 徽 财贸 职业 学 院 耿 金 岭 院 长 一 行 考察 我 院 
大 </a></li> 
<li><a href =""> 全 国 高 职高 专 院 校 思想 政治 理论 课 微 课 教学 


比 ...</a></1i> 

<li><a href ="">[ 党 的 群众 路 线 教育 实践 活动 ] 学 院 …</a> 
</li> 

<1i><a href =""> 全 国 高 职高 专 院 校 思想 政治 理论 课 微 课 教 
%...</a></li> 


<li><a href =""> 全 国 高 职高 专 院 校 思想 政治 理论 课 微 课 教学 
比 ...</a></1i> 
<li><a href = ""> 澳 大 利 亚 塔 斯 马 尼 亚 州 教育 部 代表 团 .…</a> 


</li> 
</ul> 
</div> 
</div> 
</div> 
«t -- 此 处 省 略 其 他 4 项 < div class = "con"> 的 选项 卡 下 内 容 --> 
</div> 
</div> 
</div> 


<! -- 右 侧 新 闻 列 表 -- > 
<div id= "main- right" class = "fr"> 
<div class = "box"> 
<div class = "box — top"> 
<div class = "box - top- area"> 
< h3 > 通知 公告 </h3 > 
<a href ="" class = 'mores > 更 多 >></a> 
</div> 
</div> 
<div class = "box - center"> 
<div class = "notice"> 
<ul> 
<li><a href ="" class = "fl"> 澳 大 利 教育 部 代表 团 .…</a> 
< span class = "add - time fr"> 2014 - 10 - 18 </span></li> 
<! -一 此 处 省 略 其 余 列表 项 内 容 -> 
</ul> 
</div> 
</div> 
</div> 
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</div> 
</div> 
<! -- 图 片 滚动 -一 > 
<div id= "cate- info" class = "w960"> 
<div class = "picScroll"> 
<ul> 
<li><a href ="#">< img src ="images/1. jpg" /></a></li> 
<li><a href = " # ">< img src = "images/2. jpg" /></a></li> 
<li><a href ="#">< img src = "images/3. jpg" /></a></li> 
<li><a href = " # ">< img src = "images/1. jpg" /></a></li> 
<li><a href ="#">< img src = " inages/2. jpg" /></a></li> 
<li><a href = " # ">< img src = "images/3. jpg" /></a></li> 
<li><a href ="#">< img src = "images/1. jpg" /></a></li> 
<li><a href ="#">< img src ="images/2. jpg" /></a></li> 
<li><a href = " # ">< img src = "images/3. jpg" /></a></li> 
</ul> 
«a class = "prev" style= "display:none;"></a> 
«a class = "next" style= "display:none;"></a> 
«/div» 
«/div» 
<! -- 页 面 底 部 --» 
<div id = "footer"> 
<p> 版 权 所 有 &copy; 芜湖 职业 技术 学 院 COPYRIGHT&copy; WUHU ISTITUTE OF TECHNOLOGY 皖 ICP 备 
05000975 号 </p> 
<p> 北 校区 地 址 : 安徽 省 芜湖 市 银 湖北 路 62 号 ”邮编 : 241006 南 校区 地 址 : 安徽 省 芜湖 市 文 
津 西 路 ”邮编 : 241003 </p> 


</div> 


l2 修改 CSS 样式 


CSS 样式 存放 于 外 部 样式 表 文 件 common. css 和 style. css 中 ,本 任务 还 采用 了 Font 
Awesome 图 标 字体 ,所 以 在 一 head 盖 中 引入 以 下 文件 。 


« link rel = "stylesheet" href = "css/common. css"> 
< link rel = "stylesheet" href = "css/style.css"> 
< link href = "css/font - awesome. min. css" rel = "stylesheet" type = "text/css"> 


common. css 文件 中 存放 通用 样式 ,代码 如 下 。 


@CHARSET "UTF - 8"; 

* { margin:0; padding:0; list- style:none;] 
ol,ul,li ( list- style: none; } 

a{text — decoration: none;] 

a: hover{color: red; } 

input, img, select {vertical — align: middle; } 
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html, body { font:normal 13px "Microsoft YaHei" ;font - family: "Microsoft YaHei", "微软 雅 黑 "," 
sans — serif" ;} 

.fl(float: left; } 

.fr(float: right; } 

. Clearf ix{display: block; clear: both; } 

.Clearfix{ * zoom:1;} 

. clearfix: after (display: block; overflow: hidden; clear: both; height: 0; visibility: hidden; 
content :".";} 

. pt10{padding - top: 10px; } 

.prl0{padding - right: 10px; } 

. pb10{ padding - bottom: 10px; } 

. p110{ padding - left: 10px; } 

.pt5(padding- top: 5px; } 

.pr5(padding- right: 5px; } 

. pb5{ padding — bottom: 5px; } 

. pl5{ padding — left: 5px; } 

.w960(width: 960px; } 

.w950(width: 950px; } 


在 style. css 文件 中 存放 首页 中 的 样式 ,代码 如 下 。 


@CHARSET "UTF - 8"; 
body{ 
background: url(../images/bg. jpg); 
background - repeat: no- repeat; 
background - position: center, 40px; 
) 
# top{ 
height: 40px; 
line- height : 40px; 
background: #1b6ec3 url(../images/top_bg. jpg) 0 bottom repeat - x; 
position: relative; 
z- index:2; 
width: 100 % ; 


.top- main( width:950px; margin:0 auto; height: 40px; } 
.top- main h3( font- weight:normal; font- size:100 % ;} 
.top- main dl( zoom:1; } 
.top— main dd( float:left; position:relative; } 
. top - main dd h3( float:left; } 
. top- main dd h3 af 
color: # fff; 
display: inline- block; 
* display: inline; 
zoom:1; 
height : 40px; 
line- height : 40px; 
padding: Opx 20px; 
} 
. top - main dd h3 a:hover, 
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.top 一 main dd. on h3 a{ 
background: # fff url(../images/top_cur. jpg) 0 0 repeat- x; 
color: # 1b6ec3; 
} 
.top- main dd ul( 
display:none; /* 默认 隐藏 * / 
position:absolute; 
top:40px; 
left: — 1px; 
border:1px solid # 12487f; 
border - top:0; 
background: # fff; 
一 moz - box - shadow: 3px 3px 3px rgba(0, 0, 0, .1); 
— webkit — box — shadow: 3px 3px 3px rgba(0, 0, 0, .1); 
box- shadow: 3px 3px 3px rgba(0, 0, 0, .1); 
} 
.top- main dd ul li{ padding: 10px; } 
.top 一 main dd ul li af display: block; color: #333; padding: 0 15px; } 
.top- main dd ul li a:hover{ background: # FFF5DA; color: # £67902; } 
.top- main dd ulli a span( color: # FF8400; margin- left:5px; } 
.top- main . top - right dd h3 af 
padding:Opx 15px; 
text- indent: - 99999px; 
) 
.top- main.top- right dd ul( 
left: - 20px; 
) 
.top- main . top- right .wx{ 
background: url(../images/weixin. jpg) center center no - repeat; 
) 
.top- main . top - right .xl{ 
background: url(../images/xl.jpg) center center no- repeat; 
) 
.top- main .top- right .tx( 
background: url(../images/tx. jpg) center center no- repeat; 


.top- main . top- right dd h3 a: hover, 

.top- main . top- right dd. on h3 af 
/ * background: url(../images/wx_cur. jpg) 0 bottom no-repeat; */ 
/* color: #1b6ec3;  */ 

} 

.container(margin: 0px auto; } 

# logo{ 
height: 80px; 
background: url(../images/logo. png) - 10px 0 no- repeat; 
margin: 0 auto; 

} 

* nav( 
height: 41px; 
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margin: 0 auto; 
background: #cee4f8 url(../images/nav bg. jpg) 0 0 repeat - x; 


.navBar( position:relative; z — index:1; color: #5a5a5a; height:41px; line- height:4lpx; } 
.nav( width:950px; margin:0 auto; } 
.nav h3( font- size:100 % ; font- weight:normal; font- size:14px; } 
.nav.m( position:relative; float:left; width:105px;display:inline; text - align:center; } 
.nav h3 a( zoom:1; height:41px; line- height:4lpx; display:block; color: #5a5a5a; 

font- weight: bold; background: url(../images/nav line.jpg) 0 0 no- repeat; 
} 


.nav .nav index( 
background: none; 
) 
.nav .on h3 a( background: url(../images/nav a cur. jpg) 0 0 repeat-x; color: # bb0000;] 
.nav .sub{ display:none; / * 默认 隐藏 * / width:105px; padding:10px 0; position:absolute; 
left:- 1px; top:4lpx; float:left; line- height:30px; 
border:1px solid & 96cled;border- top: none; 
background: # fff; 
一 moz - box - shadow: 3px 3px 3px rgba(0, 0, 0, .1); 
— webkit - box - shadow: 3px 3px 3px rgba(0, 0, 0, .1); 
box- shadow: 3px 3px 3px rgba(0, 0, 0, .1); 


.nav .sub li{ text- align:center; } 

.nav . sub li a{ color: #333; display:block; zoom:1;} 

.nav .sub li a:hover{ background: # ddd; color: #c00; } 

.nav .sub dl{ display:inline- block; * display: inline; zoom:1; vertical - align:top; padding: 
15px 35px; line- height:26px; } 

. nav .sub dl a:hover{ color: #c00; } 

.nav . sub dl dt a{ color: # bb0000; font- weight: bold;font- size: 14px; } 

. nav . sub dl dd a( color: #999; } 


.nav #m2 .sub{ 
z- index:1; 
width: 948px; 
left: - 210px; 
text- align: left; 
) 
* main( 
padding - top: 20px; 
) 
# main- left( 
width: 630px; 
} 
# main- right{ 
width: 310px; 
} 


/* 本 例子 css */ 

.ajaxBox( width:628px; border:1px solid # e2e2e2; border- top:2px solid #1862ad; ] 
有 
height:34px; background: #F5F5F5; } 
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.ajaxBox .hd ul{position:relative; margin-bottom: — 1px; overflow:hidden; zoom:1; } 
.ajaxBox .hd ul 1i{ float:left; border — right:1px solid # e2e2e2; border — left:1px solid + 
e2e2e2; margin- right: - 1px; font:normal 14px/34px "Microsoft YaHei"; font- weight:bold; } 
.ajaxBox .hd ul li af display:block; width:124px;color: #404040; text — align: center; } 
.ajaxBox .hd ul . tab_index a(padding- left: 4px; } 

.ajaxBox .hd ul li.on( background: # fff; border — bottom:1px solid #fff; } 

.ajaxBox .hd ul li.on a( color: #404040; font- weight: bold; } 

.ajaxBox . bd{ padding:15px 20px; overflow:hidden; } 


.ajaxBox .bd .con{ height:230px; overflow: hidden; } 
.ajaxBox .bd . picList{ overflow:hidden; zoom:1; } 
.ajaxBox .bd .picList li( float:left; margin- right:20px; display: inline; } 
.ajaxBox .bd . picList li img( width:140px; height:93px; } 
.ajaxBox .bd . list li( height:22px; line- height:22px; color: # 666; } 
. news — right( 
width: 284px; 
} 
.news - right ul li( 
height: 28px; 


line- height: 28px; 
background: url(../images/dot. jpg) 0 12px no- repeat; 
padding - left: 12px; 
) 
.news — right ul li a,.notice li a(color: #333;} 
.news- right ul li a: hover,. notice li a:hover,. video - list li p a: hover {text — decoration: 
underline;color: #bb0000; } 
/* video- list «/ 
. video - list(width:588px;position:relative;height:230px; } 
.video- list li{ left: 0px; overflow: hidden; width: 159px; position: absolute; top: 0px; height: 
110px} 
. video - list li a. cover{ background: # 478fd8; filter:alpha( opacity = 80); 
一 moz — opacity:0.8; 
— khtnl - opacity: 0.8; 
opacity: 0.8; left:0px;color: # fff; font — family: microsoft yahei'; position: absolute; 
top: 0px; } 
. video — list li a: hover{color: # fff} 
. video- list li a strong{ line - height :2em; font - size: 14px; } 
. video- list li p( 
background: # 478fd8; 
filter:alpha(opacity - 80); 
— moz — opacity:0.8; 
— khtml - opacity: 0.8; 
opacity: 0.8; 
) 
.video- list li pa( 
display: block; 
height: 40px; 
line- height: 40px; 
color: # fff; 
font- size: l4px; 
font- weight: bold; 
text- align: center; 
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background: url(../images/a.png) 0 3px no- repeat; 


. video- list .a2(width:230px; height:230px] 
. video- list .a5{left:250px; top: 0px} 
.video- list . 
. video- list .a7{left:250px; top:120px} 
. video- list .a8{left:428px; top:120px} 
. video- list .a2 a. cover {padding - right: 20px; padding — left: 30px; font - size: 18px; padding — 
bottom: 15px; overflow: hidden; width: 180px; padding — top: 45px; height :130px} 
. video- list .a5 a. cover {padding - right: 10px; padding — left: 10px; font - size: 12px; padding — 
bottom: 10px; overflow: hidden; width: 139px; padding — top: 10px; height :90px} 
. video - list .a6 a. cover {padding - right: 10px; padding - left: 10px; font - size: 12px; padding 一 
bottom: 10px; overflow: hidden; width: 139px; padding — top: 10px; height : 90px} 
. video - list .a7 a. cover {padding - right: 10px; padding - left: 10px; font — size: 12px; padding 一 
bottom: 10px; overflow: hidden; width: 139px; padding — top: 10px; height :90px} 
. video - list .a8 a. cover {padding - right: 10px; padding - left: 10px; font - size: 12px; padding 一 
bottom: 10px; overflow: hidden; width: 139px; padding — top: 10px; height :90px} 
.box{ 

border:ipx solid # e2e2e2; border - top:2px solid #1862ad; 





) 
. box- top{ 
padding: 0px 20px; 
} 
. box- top . box- top - area{height: 35px;line- height: 35px; border - bottom: 1px dashed # ccc; } 
.box- top h3{float: left; font — size: l4px;] 
.box- top .mores{float: right; font - size: 13px;color: & e2e2e2) 
.notice(padding: 15px 20px Opx 20px; height: 244px; } 
.notice li(height: 28px;line- height: 28px; } 
.add- time(color: #ddd; font - size: 12px; } 
# cate- info{ padding - top: 20px;margin: 0 auto; } 
# footer{ 
height: 81px; 
padding- top: 20px; 
margin - top: 20px; 
background: url(../images/footer. jpg) 0 0 repeat - x; 


) 
# footer{ 
color: #fff; 
text- align: center; 
line- height: 25px; 
) 


. header - input( 
padding:25px 0; 
float: right; 
overflow: hidden; 

) 

.waiting( 
color: #ccc; 

) 

# search( 
padding: 6px 8px; 








width: 170px; 
font- size: 12px; 
color: : #36332E; 
border: solid 1px #ccc; 
border — radius: 6px; 
float: left; 

} 

# search - btn{ 
float: left; 
background-color: #1B6EC3; 
width: 28px; 
height: 28px; 
margin 一 left: 3px; 
border: solid 1px # 1B6ECO; 
border - radius: 4px; 
cursor: pointer; 
color: # fff; 


E 添加 动态 效果 


在 一 head 二 中 需 引 入 相关 的 JS 文件 。 


<script type = "text/javascript" src = "js/jquery. min. js"></script > 
<script type = "text/javascript" src = "js/jquery. SuperSlide. 2.1. js"></script > 


jquery. SuperSlide. 2. 1. js 为 一 个 插件 ,用 以 下 代码 调用 该 插件 实现 主体 部 分 标签 页 切 
换 效果 。 


<script type = "text/javascript"> 
jQuery(" . ajaxBox") . slide({}); 
</script > 


搜索 框 中 显示 默认 搜索 文字 为 "自主 招生 ”, 获 得 焦点 后 文字 消失 ,JavaScript 代码 如 下 。 


<script type = "text/javascript"> 
$ (function () { 
$ (" # search"). val(" H £44"). addClass("waiting” ) 
.blur(function () { 
if ( $ (this). val() == "") { 
$ ("# search"). val(" H £44 4E"). addClass("waiting") ; 
j; 
n 
.focus(function () ( 
if ($ ("#search").val() ==“" 自 主 招生 ") ( 
$ (" £ search"). val(""). removeClass("waiting") ; 





以 下 代码 实现 导航 下 拉 菜单 效果 。 





在 “视频 新 闻 ” 的 标签 页 中 , 当 鼠 标 悬 停 在 图 片上 时 ,该 区 域 显示 标题 ,效果 如 图 11-3 所 
示 , 代 码 如 下 。 




















图 11-3 ”鼠标 悬 停 显 示 标 题 
最 后 ,需要 实现 图 片 滚动 效果 ,代码 如 下 。 
<script type = "text/javascript"> 


$ ('. picScrol1'). hover(function(){ 
$ ('. prev, .next'). show() ; 


), function()( 
$ ('. prev, .next'). hide() ; 
ni 
jQuery(". picScroll"). slide({ 
mainCell:"ul", 


autoPlay: true, 
effect:"left", 





n; 


</script> 


还 需要 为 滚动 图 片 设置 CSS 样式 ,代码 如 下 。 


. picScroll{ position: relative; height: 152px; padding 
overflow:hidden; } 
.picScroll ul{ overflow:hidden; zoom:1; } 


效果 


: Opx Opx 0px 5px; background: # fff; 


.picScroll ul li{ float:left; width:320px;height:152px; background: url(../images/cate. jpg) 


0 0 no- repeat; overflow:hidden; display:inline; ) 
.picScroll ul li img(margin: 2px Opx Opx 2px; ) 
.picScroll .prev, 


.picScroll . next( position: absolute; left: 10px; top: 60px; display: block; width: 18px; 
height:28px; overflow: hidden; background: url(../images/icons. png) - 40px 0 no — repeat; 


cursor:pointer; } 


.picScroll .next( left:auto; right:10px; background - position: — 120px 0; } 


.picScroll .prevStopí background- position:0 0; ) 
.picScroll .nextStop{ background- position: — 80px 0; } 


至 此 ,整个 学 校 网 站 首页 即 完 成 了 。 





任务 2 响应 式 布局 学 校 网 站 制作 





b 任务 描述 


本 任务 需要 完成 一 个 响应 式 布局 的 页 面 制 作 , 效 果 如 图 11-4 所 示 。 针 对 不 同 的 显示 器 
分 辩 率 和 浏览 器 窗口 大 小 ,该 网 页 显示 不 同 的 布局 方式 。 
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图 11-4 响应 式 布局 效果 








b 任务 实施 


|: 确定 结构 


本 任务 的 HTML 文档 结构 如 图 11-5 所 示 。 


Logo 、 导 航 菜单 
一 一 中 间 部 分 
图 片 切换 
I—— 中 间 主 体 部 分 
左 侧 选项 卡 
一 一 右 侧 通知 公告 
[一 一 公共 服务 
c 左 侧 选 项 卡 
一 一 右 侧 新 闻 列 表 






































一 一 底部 


图 11-5 响应 式 布局 页 面 的 HTML 文档 结构 


l. 设置 meta 和 引入 文件 


响应 式 布局 需要 在 二 head 二 中 设置 viewport 元 素 , 本 任务 采用 bootstrap 框架 .Font 
Awesome 图 标 字 体 , 还 引入 一 些 插件 完成 一 定 的 效果 ,需要 在 二 head 二 中 引入 这 些 文件 。 


<meta content = "width = device — width, initial- scale=1.0" name = "viewport"> 

<meta http- equiv = "X— UA - Compatible" content = "IE = edge, chrome = 1"> 

<meta content = "description" name = "description"> 

<meta content = "keywords" name = "keywords"> 

<meta content = "" name = "author"> 

<meta property = "og:site name" content =" — CUSTOMER VALUE - "> 

<meta property = "og:title" content =" — CUSTOMER VALUE — "> 

<meta property = "og:description" content =" — CUSTOMER VALUE — "> 

<meta property = "og:type" content = "website" 

<meta property = "og: image" content = " - CUSTOMER VALUE- "><! —— link to image for socio --> 
<meta property = "og:url" content =" — CUSTOMER VALUE — "> 

<! —— Global styles START 一 一 > 

< link href = "assets/global/plugins/font — awesome/css/font — awesome. min. css" rel =" 
stylesheet"> 

< link href = "assets/global/plugins/bootstrap/css/bootstrap. min. css" rel = "stylesheet"> 

<! — Global styles --> 

<! — Page level plugin styles START 一 一 > 

< link href = "assets/global/plugins/carousel — owl - carousel/owl — carousel/owl. carousel. css" 
rel = "stylesheet"> 

< link href = "assets/global/plugins/slider - revolution— slider/rs - plugin/css/settings. css" 
rel = "stylesheet"> 
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<! — Page level plugin styles ES 

<! —— Theme styles START 一 一 > 

< link href = "assets/global/css/components. css" rel = "stylesheet"> 

< link href = "assets/layout/css/style. css" rel = "stylesheet"> 

< link href = "assets/layout/css/style - revolution- slider. css" rel = "stylesheet"> 

< link href = "assets/layout/css/style — responsive. css" rel = "stylesheet"> 

< link href = "assets/layout/css/themes/red. css" rel = "stylesheet" id= "style 一 color"> 
< link href = "assets/layout/css/custom. css" rel = "stylesheet"> 


E 添加 HTML 内 容 并 应 用 框架 及 插件 


Logo 区 域 的 导航 菜单 利用 Bootstrap 中 dropdown-toggle 类 制作 下 拉 菜 单 , 利 用 
JavaScript 实现 导航 响应 式 展开 与 简约 效果 。 图 片 轮 播 采 用 捅 件 方式 完成 。 左 侧 选项 卡 fs 
侧 公告 栏 等 利用 类 col-md-X 和 类 col-sm-X 实现 不 同 浏览 器 大 小 的 不 同 布局 。 完 整 的 
HTML 代码 如 下 。 


<body class = "corporate"> 
<! — BEGIN TOP BAR 一 一 > 
<div class = "pre 一 header"> 
<div class = "container"> 
<div class = "row"> 
<! —— BEGIN TOP BAR LEFT PART 一 一 > 
<div class = "col - md- 6 col — sm- 6 additional — shop — info"> 
<ul class = "list — unstyled list- inline"> 
<li><a href = ""> 网 站 首页 </a></1i> 
<1i><a href =""> 新 闻 中 心 </a></1i> 
<li><a href = ""> 数 字 校 园 </a></1i> 
<li><a href = ""> 校 园 博客 </a></1i> 
<li><a href =""> 思 政 联盟 网 </a></1i> 
</ul> 
</div> 
<! —— END TOP BAR LEFT PART 一 一 > 
<! —— BEGIN TOP BAR MENU 一 一 > 
<div class = "col- md - 6 col - sm - 6 additional- nav"> 
<ul class = "list - unstyled list- inline pull- right" 
< li class = "langs - block"> 
<a href = "javascript:void(0);"> 微 信 </a> 
<div class = "langs - block - others — wrapper" 
<div class = "langs - block - others"> 
<img src = "images/wx. jpg" alt = "" width= "100" 
height = "100" 
</div> 
</div> 
</li> 
< li class = "langs - block"> 
<a href = "javascript:void(0);"> 微 博 </a> 
< div class = "langs - block - others — wrapper" > 
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<div class = "langs — block — others"> 
<img src = "images/wb. png" alt = "" 


height = "100"> 
</div> 
</div> 
</li> 
</ul> 
</div> 
<! — END TOP BAR MENU 一 一 > 
</div> 


</div> 

</div> 

<! —— END TOP BAR 一 一 

<! — BEGIN HEADER 一 一 > 

<div class = "header"> 

<div class = "container" 

<a class = "site - logo" href = "index. html"> logo 
<! -- < img src = "images/logo. png" alt = "logo"> 
</a> 





<a href = "javascript: void(0);" class = "mobi - toggler"> 


< i class = "fa fa- bars"></i ></a> 


<! — BEGIN NAVIGATION 一 一 > 
< div class = "header - navigation pull — right font — transform- inherit"> 


<ul> 
<li><a href =" #"># Jl </a></li> 
< li class = "dropdown"> 


width = "100" 


<a class = "dropdown - toggle" data - toggle = "dropdown" data - target ="#" 


href="#"> 
学 校 概况 
</a> 


<ul class = "dropdown - menu"> 
<li><a href =" + EE fii St</a></li> 
<li><a href ="#" 现 任 领导 </a></1i> 
<li><a href ="#"> 校 园 风光 </a></1i> 
</ul> 
</li> 
< li class = "dropdown dropdown — megamenu"> 


<a class = "dropdown - toggle" data— toggle = "dropdown" data - target ="#" 


href ="#"> 
机 构 设 置 
</a> 
<ul class = "dropdown - menu"> 
<li> 


<div class = "header - navigation - content"> 


<div class = "row"> 


<div class = "col- md- 4 header - navigation - col"> 





< h4 > 党 群 机构 </h4 > 

<ul> 
<li><a href ="#">JpBB</a></li> 
<li><a href =" 井 "> 组 织 部 </a></1i> 
<li><a href ="#">H{§@M</a></li> 
<li><a href =" # "> SX Abc /a»«/1i» 
<li><a href ="#"> 工 会 </a></li> 
<li><a href = "#"> 团 委 </a></1i> 

</ul> 

< h4 > 教 辅 机 构 </h4 > 

<ul> 
<li><a href = " & ">i Bfic/a» «/1i» 
<li><a href ="#"> 学 报 编辑 部 </a></1i> 
<li><a href =" 井 "> 创业 中 心 </a></1i> 
<li><a href = " # "> PÆ f}</a></li> 


</ul> 

</div> 

<div class = "col - md- 4 header - navigation 一 col"> 
< h4 > 行政 机 构 </h4 > 
<ul> 


<li><a href = " # "> 教务 处 </a></1i> 
<li><a href ="#"> 科 研 处 </a></1i> 
<li><a href ="# ">i 4 th</a></li> 
<li><a href =" # "> #Æ4b</a></li> 
<li><a href ="##"> 招 生 就 业 处 </a></1i> 
<li><a href ="#"> 保 卫 处 </a></1i> 
<li><a href ="#"> 总 务 处 </a></1i> 
<li><a href ="#"> 干 训 中 心 </a></1i> 
<1i><a href = ""> 实 验 实 训 中 心 </a></1i> 
<li><a href = ""> 国 际 交流 与 合作 处 </a></1i> 
<li><a href = ""> 国 有 资产 管理 处 </a></1i> 

</ul> 

< h4 > 附属 机 构 </h4 > 

<ul> 
<li><a href =" # ">G WM DUE DEAE </a></1i> 
<li><a href =" + ">[ft#i</a></li> 


</ul> 

</div> 

<div class = "col — md- 4 header — navigation - col"> 
< h4 > 教学 机 构 </h4 > 
<ul> 


<li><a href ="#"> 材 料 工 程 学 院 </a></1i> 
<li><a href ="#"> 电 气 工程 学 院 </a></1i> 
<li><a href = "#"> 公 共管 理学 院 </a></1i> 
<li><a href ="#"> 国 际 经 贸 学 院 </a></1i> 
<li><a href =" 井 "> 机 械 工程 学 院 </a></1i> 
<li><a href = ""> 建 筑 工程 学 院 </a></1i> 

<li><a href = ""> 经 济 管理 学 院 </a></1i> 
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<li><a href = ""> 汽 车 工程 学 院 </a></1i> 
<li><a href = ""> 人 文 旅游 学 院 </a></1i> 
<li><a href = ""> 生 物 工 程 学 院 </a></1i> 


<li><a href ="#"> 网 络 工程 学 院 </a></1i> 
<li><a href =" 井 "> 信息 工程 学 院 </a></1i> 
<li><a href ="#"> 艺 术 传 媒 学 院 </a></1i> 
<li><a href =" 井 "> 应 用 外 语 学 院 </a></1i> 
<li><a href ="#"> 园 林 园 艺 学 院 </a></1i> 
<li><a href = ""> 继 续 教育 学 院 </a></1i> 
<li><a href = ""> 基 础 部 </a></1i> 

<li><a href =""> 思 政 部 </a></1i> 
<li><a href = ""> 体 育 部 </a></1i> 

</ul> 
</div> 


</div> 
</div> 
</li> 
</ul> 
</li> 
<li><a href ="#"> 师 资 队伍 </a></1i> 
<li><a href - " £ "»3R/E SE Mr -/a» «/1i» 
<li><a href ="#"> 国 际 交流 </a></1i> 
<li><a href ="#"> 继 续 教育 </a></1i> 
<1i><ahref="#"> 附 属 中 职 </a></1i> 
<li><a href ="#"> 学 子 风采 </a></1i> 
<! — BEGIN TOP SEARCH -- ^ 
« li class = "menu - search"> 
< span class = "sep"></span> 
< i class = "fa fa- search search- btn"></i > 
< div class = "search - box"> 
< form action=" # "> 
<div class = "input - group"> 
<input type = "text" placeholder = "请 输入 搜索 关键 字 " 
class = "form — control "> 
< span class = "input - group - btn"> 
< button class = "btn btn - primary" type = "submit"> 搜 索 </button> 
</span> 
</div> 
</form> 
</div> 
</li> 
A ES TOP SEARCH --> 
</ul> 
</div> 
<! — END NAVIGATION 一 一 > 
</div> 
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</div> 
<! — Header END -一 > 


<div class = "margin - bottom — 20"> &nbsp;</div> 


<div class = "main"> 
< div class = "container"> 


<div class = "page - slider margin — bottom— 40"> 
<div class = "fullwidthbanner - container revolution- slider"> 
< div class = "fullwidthabnner"> 
<ul id= "revolutionul"> 
<! — THE NEW SLIDE 一 一 > 
<li data - transition = "fade" data — slotamount = "8" data - masterspeed = "700" 
data - delay = "9400" data - thumb = " # "> 
<! — THE MAIN IMAGE IN THE FIRST SLIDE 一 一 > 
< ing src = "images/6. jpg" alt = ""></li> 
<! —— THE NEW SLIDE --> 
«li data - transition = "fade" data — slotamount = "8" data — masterspeed = "700" 
data - delay = "9400" data- thumb = " # "> 
<! — THE MAIN IMAGE IN THE FIRST SLIDE 一 一 > 
< ing src= "images/8. png" alt = ""></li> 
<! — THE NEW SLIDE 一 一 > 
«li data - transition = "fade" data - slotamount = "8" data - masterspeed = "700" 
data - delay = "9400" data - thumb = " # "> 
<! —— THE MAIN IMAGE IN THE FIRST SLIDE 一 一 > 
< img src = "images/7.png" alt = ""></li> 
<! —— THE NEW SLIDE 一 一 > 
«li data - transition = "fade" data — slotamount = "8" data - masterspeed = "700" 
data - delay = "9400" data - thumb = " # "> 
<! —— THE MAIN IMAGE IN THE FIRST SLIDE 一 一 > 
< ing src = "images/9. png" alt = ""></li> 
</ul> 
<div class = "tp - bannertimer tp- bottom"></div> 
</div> 
</div> 
</div> 
<! — BEGIN TABS AND TESTIMONIALS 一 一 > 
<div class = "row mix — block margin - bottom — 40"> 
<= TABS) — 
<div class = "col- md- 7 tab- style- 1"> 
<ul class = "nav nav - tabs"> 
< li class = "active"><a href = " # tab- 1" data- toggle = "tab"> 学 院 要 闻 </a></1i> 
<li><a href =" # tab- 2" data- toggle = "tab"> 职 教 动态 </a></1i> 
<li><a href =" # tab- 3" data— toggl tab"> 媒 体 看 学 院 </a></1i> 
<li><a href = " # tab- 4" data- toggle = "tab"> 图 片 视 频 </a></1i> 
</ul> 
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<div class = "tab - content cate - tab- content"> 
<div class = "tab - pane row fade in active" id= "tab 一 1"> 
<div class = "col - md- 6 col- sn- 6"> 
<div class = "front - carousel"> 
<div class = "carousel slide" id= "myCarousel"> 
<! — Carousel items -一 > 
<div class = "carousel - inner"> 
<div class = "item active"> 
< img alt ="" src= "images/5.png"> 
</div> 
<div class = "item"> 
< img alt ="" src = "images/5. png"> 
</div> 
<div class = "item"> 
< ing alt ="" src = "images/5. png"» 
«/div» 
</div> 
<! — Carousel nav -一 > 
<a data - slide = "prev" href = " #myCarousel" 
class = "carousel - control left"> 
< i class = "fa fa- angle- left"></i> 
</a> 
<a data - slide = "next" href = " # nyCarousel" 
class = "carousel - control right"> 
< i class = "fa fa - angle - right"></i > 
</a> 
</div> 
</div> 
</div> 
<div class = "col - md- 6 col- sm - 6"> 
<ul class = "nav sidebar — categories "> 
<li><a href = ""> 澳 大 利 亚 塔 斯 马 尼 亚 州 教育 部 代表 团 .…</a></1i> 
<li><a href =""> 安 徽 工程 大 学 教学 督导 组 来 院 指导 工作 </a></1i> 
<li><a href = ""> 安 徽 财贸 职业 学 院 耿 金 岭 院 长 一 行 考察 我 院 大 </a></1i> 
<li><a href =""> 全 国 高 职高 专 院 校 思想 政治 理论 课 微 课 教学 比 .…</a></1i> 
<li><a href ="">[ 党 的 群众 路 线 教育 实践 活动 ] 学 院 ...</a></1i> 
<li><a href = ""> 安 徽 财贸 职业 学 院 耿 金 岭 院 长 一 行 考察 我 院 大 </a></1i> 
</ul> 
</div> 
</div> 
<div class = "tab- pane fade" id= "tab 一 2"> 
<div class = "col - md- 6 col — sm- 6"> 
<ul class = "nav sidebar - categories "> 
<li><a href =""> 澳 大 利 亚 塔 斯 马 尼 亚 州 教育 部 代表 团 .…</a></1i> 
<li><a href =""> 安 徽 工程 大 学 教学 督导 组 来 院 指导 工作 </a></1i> 
<li><a href = ""> 安 徽 财 贸 职业 学 院 耿 金 岭 院 长 一 行 考察 我 院 大 </a></1i> 
<li><a href = ""> 全 国 高 职高 专 院 校 思想 政治 理论 课 微 课 教学 比 .…</a></1i> 


i 


必 emus 





<li><a href = "">[ 党 的 群众 路 线 教育 实践 活动 ] 学 院 ...</a></1i> 
<li><a href = ""> 安 徽 财贸 职业 学 院 耿 金 岭 院 长 一 行 考察 我 院 大 </a></1i> 
</ul> 
</div> 
<div class = "col- md- 6 col- sm- 6"> 
<div class = "front - carousel"> 
<div class = "carousel slide" id= "myCarousel2"> 
<! — Carousel items -一 > 
<div class = "carousel — inner"> 
<div class = "item active"> 
< ing alt ="" src= "images/5. png"> 


</div> 
<div class = "item"> 
< ing alt ="" src= "images/5.png"> 
</div> 
<div class = "item "> 
< ing alt ="" src= "images/5.png"> 
</div> 
</div> 


<! — Carousel nav --> 
<a data - slide = "prev" href = " #myCarousel2" 
class = "carousel - control left"> 
< i class = "fa fa - angle- left"></i> 
</a> 
<a data - slide = "next" href = " # nyCarousel2" 
class = "carousel — control right"> 
< i class = "fa fa - angle - right"></i > 
</a> 
</div> 
</div> 
</div> 


</div> 
<div class = "tab- pane fade" id= "tab- 3"> 
<div class = "col - md- 12 sale- product"> 
<div class = "owl - carousel owl - carousel3"> 
<div> 
< div class = "product - item"> 
<div class = "pi- img - wrapper"> 
<img src = "images/4. jpg" class = "img - responsive" 
alt = "Berry Lace Dress"> 
</div> 
<h3 ><a href ="#"> 澳 大 利 亚 塔 斯 马 尼 亚 州 教育 </a></h3> 
<div class = "pi-price"><iclass= "fa fa- eye"> 1200 </i ></div> 
<a href ="+" class = "btn btn- default add2cart"> 详 情 </a> 
</div> 
</div> 
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<div> 
<div class = "product - item"> 
<div class = "pi- img - wrapper"> 
<img src = "images/4. jpg" class = "img— responsive" 
alt = "Berry Lace Dress"> 


</div> 
<h3 ><a href = "shop - item. html"> 安 徽 工程 大 学 教学 督导 组 来 院 指导 
工作 </a></h3 > 


<div class = "pi- price"»« i class = "fa fa - eye"» 1200 </i></div> 
«a href =" #" class = "btn btn - default add2cart"> 详 情 </a> 
</div> 
</div> 
<div> 
<div class = "product - item"> 
<div class = "pi - img - wrapper"> 
<img src = "images/4. jpg" class = "img - responsive" 
alt = "Berry Lace Dress"> 
</div> 
<h3 ><a href = "shop - item. html"> 党 的 群众 路 线 教 育 实践 活动 </a></h3 > 
<div class = "pi- price"»« i class = "fa fa - eye"> 1200 </i ></div> 
«a href ="+" class = "btn btn- default add2cart"> 详 情 </a> 
</div> 
</div> 





</div> 
</div> 
</div> 
<div class = "tab- pane fade" id= "tab 一 4"> 
<div class = "col - md- 12 sale- product" 
<div class = "owl - carousel owl - carousel3"> 
<div> 
<div class = "product - item"> 
<div class = "pi - img - wrapper"> 
<img src = "images/4. jpg" class = "img - responsive" 
alt = "Berry Lace Dress"> 
</div> 
<h3 ><a href ="#"> 澳 大 利 亚 塔 斯 马 尼 亚 州 教育 </a></h3> 
<div class = "pi - price">< i class = "fa fa - eye"» 1200 </i></div> 
<a href - " £" class = "btn btn default add2cart"> 详 情 </a> 
</div> 
</div> 
<div> 
« div class = "product - item"> 
<div class = "pi- img- wrapper" 
<img src = "images/4. jpg" class = "img - responsive" 
alt- "Berry Lace Dress"> 
</div> 
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<h3 ><a href = "shop - item. html"> 安 徽 工程 大 学 教学 督导 组 来 院 指导 工 
作 </a></h3 > 
<div class = "pi- price">< i class = "fa fa — eye"> 1200 </i ></div> 
<a href - " £" class= "btn btn- default add2cart"> 详 情 </a> 
</div> 
</div> 
<div> 
<div class = "product — item" 
<div class = "pi- img- wrapper" 
<img src = "images/4. jpg" class = "img - responsive" 
alt = "Berry Lace Dress"> 
</div> 
<h3 ><a href = "shop— item. html"> 党 的 群众 路 线 教 育 实践 活动 </a></h3 > 
<div class= "pi- price"»« i class = "fa fa - eye"> 1200 </i></div> 
«a href = " €" class = "btn btn- default add2cart"> 详 情 </a> 
</div> 
</div> 
<div> 
<div class = "product - item"> 
<div class = "pi- img- wrapper"> 
<img src = "images/4. jpg" class = "img— responsive" 
alt = "Berry Lace Dress"> 
</div> 
<h3><a href = "shop- item. html"> 党 的 群众 路 线 教育 实践 活动 </a></h3 > 
<div class = "pi- price"»« i class = "fa fa— eye"> 1200 </i ></div> 
<a href ="+" class = "btn btn - default add2cart"^iffff«/a ^ 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
<! —— END TABS 一 一 > 





<! — TESTIMONIALS 一 一 > 
<div class = "col - md- 5"> 
<div class = "portlet"> 
<div class = "portlet 一 title"> 
<div class = "caption"> 
<i class = "fa fa- bullhorn"></i> 通 知 公告 
</div> 
<div class - "tools"> 
<a href = "javascript: ;"> 
更 多 
</a> 
</div> 
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</div> 
<div class = "portlet - body"> 
<ul class = "nav sidebar - categories"> 
<li><a href = ""> 澳 大 利 教育 部 代表 团 ...< span class = "pull - right"> 
2014- 10 - 18 </span></a></1i> 
<li><a href = ""> 安 徽 工程 组 来 院 指导 工作 < span class = "pull - right"> 
2014- 10 - 18 </span></a></1i> 
<1i><a href =""> 安 徽 财 贸 职业 学 行 考察 我 院 大 < span class = "pull - right"> 
2014 - 10 - 18 </span></a></1i> 
<li><a href = ""> 全 国 高 职高 专 院 校 课 微 课 教学 比 … 
< span class = "pull — right"> 2014 - 10 - 18 </span></a></1i> 
<1i><a href ="">[ 党 的 群众 路 线 教育 实践 活动 ] 学 院 .…< span class = "pull - 
right"> 
2014 - 10 - 18 </span></a></li> 
<li><a href = ""> 全 国 高 职高 专 微 课 教 学 ...< span class = "pull- right" 
2014 - 10 - 18 </span></a></1i> 


</ul> 
</div> 
</div> 
</div> 
<! — END TESTIMONIALS 一 一 > 
</div> 
<! —— END TABS AND TESTIMONIALS 一 一 > 


<! — BEGIN CLIENTS --> 
<div class = "row margin- bottom - 40 our - clients"> 
<div class = "col- md - 3"> 
<h2><a href = " # ">t IR% </a ></h2 > 
<p> 学 校 各 类 系统 .专题 公共 服务 窗口 .</p> 
</div> 
<div class = "col 一 md 一 9"> 
< div class = "owl - carousel owl - carousel6 - brands"> 
<div class = "client - item"> 
<ahref="#"> 
< ing src = "images/1. jpg" class = "img - responsive" alt = ""> 
< img src = "images/1. jpg" class = "color — img img - responsive" alt = ""» 
</a> 
</div> 
< div class = "client - item"> 
<a href="#"> 
< img src = "images/2. jpg" 
< ing src = "images/2. jpg" 
</a> 
</div> 
<div class = "client - item"> 
<a href ="#"> 
< img src = "images/3. jpg" class = "img- responsive" alt = ""> 





img- responsive" alt =""> 
color- img img - responsive" alt = ""> 
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< ing src = "images/3. jpg" 
</a> 
</div> 
<div class = "client — item"> 
<a href=" * >. 
< ing src = "images/1. jpg" 
« img src = "images/1. jpg" 
</a> 
</div> 
<div class = "client - item"> 
<a href ="#"> 
< img src = "images/2. jpg" 
< ing src = "images/2. jpg" 
</a> 
</div> 
<div class = "client - item"> 
<a href ="#"> 
< img src = "images/3. jpg" 
< img src = "images/3. jpg" 
</a> 
</div> 
< div class = "client - item"> 
<a href ="#"> 
< img src = "images/1. jpg" 
< ing src = "images/1. jpg" 
</a> 
</div> 
<div class = "client - item"> 
<a href="#"> 
< img src = "images/2. jpg" 
< ing src = "images/2. jpg" 
</a> 
</div> 
</div> 
</div> 
</div> 
<! -- END CLIENTS --> 
</div> 
</div> 


<! —— BEGIN FOOTER --> 
<div class = "footer"> 
< div class = "container"> 
<div class = "row"> 
<! — BEGIN COPYRIGHT 一 一 > 


< div class = "col- md - 12 col- sm— 


class = "color - img img - responsive" 


class = "img- responsive" alt = ""> 
class = "color - img img - responsive" 








img - responsive" alt- ""> 
color- img img — responsive" 





class 





class = "img - responsive" alt Es 
class = "color- img img - responsive" 


class = "img - responsive" alt = ""> 
class = "color- img img — responsive" 


class = "img - responsive" alt =""> 
class = "color - img img - responsive" 


12 padding - top- 10"> 


alt=""> 


alt=""> 


alt=""> 


alt= "> 


alt=""> 


alt=""> 


版 权 所 有 &copy; 36 W HH ub $k AL AF GE COPYRIGHT&copy; WUHU ISTITUTE OF TECHNOLOGY ff; ICP 


4& 05000975 E <br> 


<p> 北 校区 地 址 : 安徽 省 芜湖 市 银 湖北 路 62 号 ”邮编 : 241006 南 校区 地 址 : 安徽 省 芜 


湖 市 文 津 西 路 ”邮编 : 241003 








</div> 
<! —— END COPYRIGHT 一 一 > 


</div> 
</div> 
</div> 
<! — END FOOTER 一 一 > 


[^ 样式 修饰 及 添加 JavaScript 


为 了 让 页 面 符 合 自己 的 风格 ,可 以 增加 一 些 样式 效果 ,由 于 篇 幅 限制 ,在 此 不 再 袭 述 。 
可 以 在 素材 文件 中 查看 。 
在 二 body 的 最 后 添加 下 面 JavaScript 代码 。 此 时 完整 的 响应 式 布局 的 页 面 就 完成 了 。 





<script src = "assets/global/plugins/jquery. min. js" type = "text/javascript"></script > 
<script src = "assets/global/plugins/jquery - migrate. min. js" type = " text/javascript" > </ 
script > 
<script src = "assets/global/plugins/bootstrap/js/bootstrap. min. js" type = "text/javascript"> 
</script > 

<! — END CORE PLUGINS 一 一 > 


<! —— BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) 一 一 > 
<script src = "assets/global/plugins/carousel - owl — carousel/owl — carousel/owl. carousel. 
min. js" type = "text/javascript"></script ><! -- slider for products -一 > 
< script src = " assets/global/plugins/slider - revolution - slider/rs - plugin/js/jquery. 
themepunch. revolution. min. js" type = "text/javascript"></script > 
< script src = " assets/global/plugins/slider — revolution - slider/rs - plugin/js/jquery. 
themepunch. tools. min. js" type = "text/javascript"></script > 
<script src = "assets/global/scripts/revo - slider - init. js" type = "text/javascript"» «/ 
script > 
<script src = "assets/layout/scripts/layout. js" type = "text/javascript"></script > 
<script type = "text/javascript"> 
jQuery(document). ready(function() { 
Layout. init(); 
Layout. initOWL(); 
RevosliderInit. initRevoSlider(); 
n»; 
</script> 
<! —— END PAGE LEVEL JAVASCRIPTS 一 一 > 


课 后 练习 


l. 在 此 项 目的 基础 上 ,尝试 制作 一 个 该 校 新 闻 中 心 的 页 面 和 响应 式 布局 页 面 。 
2. 学 习 了 本 项 目的 设计 思路 和 步骤 后 .尝试 制作 一 个 门户 网 站 首页 和 响应 式 布局 的 首页 。 


o—— 
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